Nó có thể flexbox không? Cửa sổ trò chuyện với đầu vào ở dưới cùng, cuộc trò chuyện cuộn lên

Question

Có vẻ như nó có thể xảy ra với flexbox, nhưng tôi không thể tìm ra.

http://codepen.io/MichaelJCole/pen/NGBVGe

Mục tiêu:

1. textarea (ví typeing trong các tin nhắn) vẫn ở dưới cùng trong suốt thời gian.
2. cuộc trò chuyện bắt đầu ở dưới cùng, sau đó cuộn lên khi cần.
3. Nếu bạn sử dụng "Google Hangouts", như ứng dụng nhắn tin trong đó.

Dưới đây là đánh dấu:

<div id="chatBar"> 
    <div id="chatList"> 
     <div class="chat mine">hello world</div> 
     <div class="chat theirs">hello moon</div> 
    </div> 
    <input id="chatBarInput" class="form-control" type="textarea"> 
    </div> 

Và đây là CSS:

html, body { height: 100%; } 
#chatBar { 
    height: 100%; 
    display: flex; 
    flex-flow: column nowrap; 
    justify-content: flex-end; 
    overflow: none; 
} 

#chatList { 
    flex: 0 1 auto; 
    display: flex; 
    flex-flow: column nowrap; 
    justify-content: flex-end; 
    overflow-y: scroll; 
} 

#chatBarInput { 
    flex: 1 0 auto; 
} 

.chat { 
    flex: none; 
    align-self: flex-start; 
    background-color: lightgreen; 
} 

.chat.mine { 
    align-self: flex-end; 
    background-color: pink; 
} 

tôi không thể nhận #chatBar để "bóp" #chatList mà không cần thiết lập một chiều cao. Đó là những gì tôi đang cố gắng tránh bằng cách sử dụng flexbox: -/

Xin lỗi, tôi là người lập trình phụ trợ. Đã thử một loạt các công cụ, sau đó pared nó xuống cho CodePen.

Có vẻ như tôi sẽ có thể nói cho flexbox bên trong cuộn, trong khi để bên ngoài một mình. Tôi có phải sử dụng vị trí: tuyệt đối không?

Answer 1

Tôi không thể lấy #chatBar để "squeeze" #chatList mà không đặt chiều cao. Đó là những gì tôi đã cố gắng để tránh bằng cách sử dụng flexbox

Bạn có flex-basis thiết lập để auto cho tất cả các yếu tố này. Nếu không có chiều cao rõ ràng, mô hình flex sẽ tự động cố gắng để chứa tất cả mọi thứ bên trong không gian có sẵn bằng cách thu hẹp hoặc mở rộng các yếu tố. Đây là lý do tại sao bạn không thể nhận được #chatList để hoạt động như dự định. div chính nó cũng như các cuộc trò chuyện cá nhân tất cả mở rộng hoặc thu nhỏ trong không gian có sẵn.

gì bạn cần làm là để bắt đầu đơn giản:

#chatBar { 
    height: 100%; overflow: hidden; 
    display: flex; flex-flow: column; 
} 
#chatList { 
    /* grow or shrink as required from flex-basis height of 20% */ 
    flex: 1 1 20%; 
    display: flex; flex-direction: column; 
    overflow: auto; 
} 

/* do not grow or shrink with a flex-basis height of 80% */ 
#chatBarInput { flex: 0 0 80%; } 

Và bạn sẽ có thể nhìn thấy nó làm việc. Sau đó, bạn có thể lấy thêm từ đây.

codepen sửa đổi của bạn: http://codepen.io/Abhitalks/pen/ZbjNvQ/

---

Mục tiêu:

1. textarea (ví typeing trong các tin nhắn) vẫn ở dưới cùng trong suốt thời gian.
2. cuộc trò chuyện bắt đầu ở dưới cùng, sau đó cuộn lên khi cần.
3. Nếu bạn sử dụng "Google Hangouts", như ứng dụng nhắn tin trong đó.

Bí quyết sẽ được sử dụng flex-direction: column-reverse và thêm vào trước các tin nhắn mới đến container thay vì phụ thêm những.

Tôi lấy câu trả lời cũ của tôi và thay đổi bố cục thành mô hình flex cho bản trình diễn mục đích này. Bạn có thể kiểm tra mã để xem nó được thực hiện như thế nào.

Demo Fiddle: http://jsfiddle.net/abhitalks/khj4903t/

Demo Snippet:

var btn \t = document.getElementById('btn'), 
 
    inp \t = document.getElementById('inp'), 
 
    chats \t = document.getElementById('chatWindow') 
 
; 
 
btn.addEventListener('click', postMsg); 
 

 
inp.addEventListener('keyup', function(e) { 
 
\t if (e.keyCode == 13) { postMsg(); } 
 
}); 
 

 
function postMsg() { 
 
\t var msg \t = inp.value, 
 
     bubble \t = document.createElement('div'), 
 
     p \t \t = document.createElement('p'); 
 
    if (msg.trim().length <= 0) { return; } 
 
    bubble.classList.add('bubble'); 
 
    bubble.classList.add('right'); 
 
    p.textContent = msg; 
 
    bubble.appendChild(p); 
 
    inp.value = ''; 
 
    chats.insertBefore(bubble, chats.firstChild); 
 
}

* { box-sizing: border-box; margin: 0; padding: 0; } 
 
html, body { height: 100%; overflow: hidden; } 
 
.wrap { 
 
    margin: 8px; height: 90%; width: 50%; 
 
    display: flex; flex-direction: column; 
 
} 
 
.container { 
 
    flex: 1 1 90%; display: flex; flex-direction: column; 
 
    background-color: #eee; border: 1px solid #ccc; overflow: auto; 
 
} 
 
.form { flex: 0 0 32px; display: flex; border: 1px solid #ddd; } 
 
.form > input[type=text] { flex: 1 1 auto; border: 1px solid #eee; } 
 
.form > input[type=button] { flex: 0 0 20%; border: 1px solid #eee; } 
 
.bubble { flex: 1 1 auto; clear: both; } /* clear the floats here on parent */ 
 
.bubble p { 
 
    border-radius: 5px; 
 
    padding: 8px; margin: 8px 12px; 
 
    max-width: 80%; /* this will make it not exceed 80% and then wrap */ 
 
    position: relative; transition: background-color 0.5s; 
 
} 
 
.left p { background-color: #ccc; float: left; } /* floated left */ 
 
.right p { background-color: #33c; color: #fff; float: right; } /* floated right */ 
 
/* classes below are only for arrows, not relevant */ 
 
.left p::before { 
 
    content: ''; position: absolute; 
 
    width: 0; height: 0; left: -8px; top: 8px; 
 
    border-top: 4px solid transparent; 
 
    border-right: 8px solid #ccc; 
 
    border-bottom: 4px solid transparent; 
 
} 
 
.right p::after { 
 
    content: ''; position: absolute; 
 
    width: 0; height: 0; right: -8px; bottom: 8px; 
 
    border-top: 4px solid transparent; 
 
    border-left: 8px solid #33c; 
 
    border-bottom: 4px solid transparent; 
 
}

<div class="wrap"> 
 
    <div id="chatWindow" class="container"> 
 
     <div class="bubble left"><p>msg</p></div> 
 
     <div class="bubble left"><p>long message</p></div> 
 
     <div class="bubble right"><p>ultra long message which can wrap at eighty percent </p></div> 
 
     <div class="bubble left"><p>lorem ipsum</p></div> 
 
     <div class="bubble right"><p>very long message</p></div>  
 
     <div class="bubble right"><p>one more message</p></div>  
 
     <div class="bubble left"><p>lorem ipsum</p></div> 
 
     <div class="bubble right"><p>another message</p></div>  
 
     <div class="bubble left"><p>lorem ipsum</p></div> 
 
     <div class="bubble right"><p>yet another message</p></div>  
 
     <div class="bubble left"><p>lorem ipsum</p></div> 
 
    </div> 
 
    <div id="inputWindow" class="form"> 
 
     <input id="inp" type="text" /> 
 
     <input id="btn" type="button" value="Send" /> 
 
    </div> 
 
</div>

Answer 2

Các thanh cuộn dọc trên trình duyệt tồn tại bởi vì bạn đã thiết lập một height: 100% đến body, và user agent stylesheet áp dụng mặc định margin đến body, thường là 8px xung quanh. Vì vậy, 100% + 16px khởi chạy cuộn dọc.

Thêm phần này vào CSS của bạn: body { margin: 0; }

Để áp dụng thanh cuộn để các flexbox nội (.chatlist), đây là hai điều chỉnh:

#chatList { 
    flex: 0 1 75px; /* specify a height */ 
    display: flex; 
    flex-flow: column nowrap; 
    /* justify-content: flex-end; REMOVE */ 
    overflow-y: scroll; 
} 

DEMO: http://jsfiddle.net/5p2vy31p/1/