フレックスボックスは使えますか？チャットウィンドウの下に入力があり、スクロールするチャット

Question

フレックスボックスで可能なようですが、わかりません。

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

目標：（​​メッセージにtypeing用）

1. textareaの一番下に全体の時間のままです。
2. チャットを開始し、必要に応じてスクロールします。
3. 「Googleハングアウト」を使用している場合、その中のメッセージアプリのようです。

ここでマークアップです：

<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> 

そして、ここでは、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; 
} 

私は高さを設定せずに#chatBar#chatList "スクイーズ" とを取得することはできません。フレックスボックスを使用して回避しようとしていたのはどれですか： -/

申し訳ありませんが、私はバックエンドコーダーです。たくさんのものを試してみたら、それをCodePenのために調べた。

私は、内側のフレックスボックスにスクロールして、外側だけを残しておく必要があるようです。私はポジションを絶対に使用する必要がありますか？

Answer 1

高さを設定せずに、#chatBarに#chatListを「絞る」ことはできません。私はあなたがすべての要素のautoからflex-basisセットを持っていたフレキシボックス

を使用して避けるようにしようとしていたものです 。明示的な高さがなければ、フレックスモデルは、要素を縮小または拡大することによって、利用可能なスペース内のすべてを自動的に収容しようとします。このため、#chatListを意図したとおりに動作させることができません。 div自体と個々のチャットは、すべて利用可能な領域内で拡大または縮小します。

#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%; } 

そして、あなたはそれが働いて見ることができます：あなたは何をすべき

はシンプル開始することです。あなたはそれからさらにここに行くことができます。

あなたの修正codepen：http://codepen.io/Abhitalks/pen/ZbjNvQ/

---

目標：（​​メッセージでtypeing用）

1. テキストエリアは、下全体の時間のまま。
2. チャットを開始し、必要に応じてスクロールします。
3. 「Googleハングアウト」を使用している場合、その中のメッセージアプリのようです。

トリックはflex-direction: column-reverseを使用し、代わりにそれらを追加のコンテナに新しいメッセージを付加することであろう。

私は古い答えを得て、この目的のデモのためにレイアウトをフレックスモデルに変更しました。どのようにコードが表示されているか見ることができます。

デモフィドル：http://jsfiddle.net/abhitalks/khj4903t/

デモスニペット：

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

あなたはbodyからheight: 100%を設定しているので、ブラウザ上の垂直スクロールバーが存在し、 user agent stylesheetは、デフォルトのmarginはbody、通常は8pxです。したがって、100％+ 16pxは垂直スクロールを開始します。

あなたのCSSにこれを追加します。

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

はDEMO：body { margin: 0; }

インナーフレキシボックス（.chatlist）にスクロールバーを適用するには、ここでは2つの調整ですhttp://jsfiddle.net/5p2vy31p/1/