フレックスボックスのようなチャットボックスcss

Question

私はボックスを作る必要があります。チャットボックスを作るのにフレックスボックスの実装を望みます。

しかし、それは私に必要なものを私に与えてくれません。ここで

.box{ 
 
width:350px; 
 
    margin:10px auto; 
 
    height:250px; 
 
    border:1px solid #000; 
 
    display:flex; 
 
    flex-flow:column; 
 
} 
 
.header{ 
 
border:1px solid blue; 
 
width:100%; 
 
    flex: 0 1 auto; 
 
} 
 
.body{ 
 
width:100%; 
 
    flex: 1 1 auto; 
 
    border:1px solid red; 
 
    
 
    display:flex; 
 
    flex-flow:column; 
 
} 
 
.scrollable{ 
 
flex: 1 1 auto; 
 
    
 
    height:100px; 
 
    overflow:auto; 
 
} 
 
.writebox{ 
 
flex: 1 1 auto; 
 
    position:relative; 
 
} 
 
.writebox textarea{ 
 
height:100%; 
 
    width:100%; 
 
}

<div class="box"> 
 
    <div class="header">SOME CONTENT . Its fixed always</div> 
 
    <div class="body"> 
 
    <div class="scrollable">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus sapien lacus, vestibulum eleifend metus placerat at. Proin nec velit id orci lobortis feugiat. Phasellus cursus felis et imperdiet congue. In tincidunt vel urna eget venenatis. Ut libero velit, auctor non ipsum quis, interdum bibendum metus. Donec ut tempor nulla, sagittis volutpat magna. Donec ut ex fermentum, cursus lectus fringilla, vehicula quam. Morbi leo massa, rutrum non tortor eu, tristique mollis erat. Donec suscipit libero sit amet eleifend interdum. Quisque ut malesuada quam. Morbi interdum libero sed enim sodales rutrum. 
 

 
Integer non metus vel tellus elementum auctor eu at lacus. Cras dapibus metus id purus porta, vitae fermentum mi imperdiet. Integer eget augue neque. Aenean varius lorem lectus, vitae lacinia nisl scelerisque et. Proin sed nibh aliquet, luctus elit sed, suscipit ligula. Morbi porttitor ligula eu risus varius, id hendrerit massa pharetra. Nullam nisl elit, sagittis nec libero non, tristique fermentum mauris. Phasellus posuere sem eu eros aliquam laoreet. Integer dui tellus, laoreet mollis nibh a, pretium finibus magna. Praesent quis convallis eros. Quisque pulvinar in sapien non dignissim. Praesent eu est nisl. Mauris sit amet nibh non nulla convallis sodales. Vestibulum porttitor dui vel nisl ultricies, non sollicitudin tortor imperdiet. Pellentesque vel nunc a est hendrerit accumsan non quis neque. Nam sagittis interdum elementum.</div> 
 
    <div class="writebox"><textarea></textarea></div> 
 
    </div> 
 
</div>

それは次のようになります。私の元のコードではhttp://i.imgur.com/xCT7mCA.png

textareaは（私は自動拡張プラグインを使用しています、私は含まれていませんでしたリミットX点で最大変数の高さを持っていますそれはスニペットで）

Answer 1

.scrollableにのみflex: 1を使用し、.writableをフレックスコンテナにします。

.scrollable { 
    flex: 1; 
} 

.writeable { 
    display: flex; 
} 

は（私は自動同様TextAreaのプラグインを育てる統合した）以下のスニペットを見てください：

autosize($('textarea'));

.box{ 
 
width:350px; 
 
    margin:10px auto; 
 
    height:250px; 
 
    border:1px solid #000; 
 
    display:flex; 
 
    flex-flow:column; 
 
} 
 
.header{ 
 
border:1px solid blue; 
 
width:100%; 
 
    flex: 0 1 auto; 
 
} 
 
.body{ 
 
width:100%; 
 
    flex: 1 1 auto; 
 
    border:1px solid red; 
 
    
 
    display:flex; 
 
    flex-flow:column; 
 
} 
 
.scrollable{ 
 
    flex: 1; 
 
    height:100px; 
 
    overflow:auto; 
 
} 
 
.writebox{ 
 
    position:relative; 
 
    display: flex; 
 
} 
 
.writebox textarea{ 
 
    height:100%; 
 
    width:100%; 
 
}

<div class="box"> 
 
    <div class="header">SOME CONTENT . Its fixed always</div> 
 
    <div class="body"> 
 
    <div class="scrollable">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus sapien lacus, vestibulum eleifend metus placerat at. Proin nec velit id orci lobortis feugiat. Phasellus cursus felis et imperdiet congue. In tincidunt vel urna eget venenatis. Ut libero velit, auctor non ipsum quis, interdum bibendum metus. Donec ut tempor nulla, sagittis volutpat magna. Donec ut ex fermentum, cursus lectus fringilla, vehicula quam. Morbi leo massa, rutrum non tortor eu, tristique mollis erat. Donec suscipit libero sit amet eleifend interdum. Quisque ut malesuada quam. Morbi interdum libero sed enim sodales rutrum. 
 

 
Integer non metus vel tellus elementum auctor eu at lacus. Cras dapibus metus id purus porta, vitae fermentum mi imperdiet. Integer eget augue neque. Aenean varius lorem lectus, vitae lacinia nisl scelerisque et. Proin sed nibh aliquet, luctus elit sed, suscipit ligula. Morbi porttitor ligula eu risus varius, id hendrerit massa pharetra. Nullam nisl elit, sagittis nec libero non, tristique fermentum mauris. Phasellus posuere sem eu eros aliquam laoreet. Integer dui tellus, laoreet mollis nibh a, pretium finibus magna. Praesent quis convallis eros. Quisque pulvinar in sapien non dignissim. Praesent eu est nisl. Mauris sit amet nibh non nulla convallis sodales. Vestibulum porttitor dui vel nisl ultricies, non sollicitudin tortor imperdiet. Pellentesque vel nunc a est hendrerit accumsan non quis neque. Nam sagittis interdum elementum.</div> 
 
    <div class="writebox"><textarea></textarea></div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://www.jacklmoore.com/js/autosize.min.js"></script>

ホープ、このことができます！