フレックスボックスをウィンドウサイズに拡大するだけで、コンテンツは表示されません

Question

2つのdivがページの一番下にあり、もう1つが「メイン」のコンテンツ領域になります。

私は私が必要なものを実証するためのjsfiddleを作成しました：https://jsfiddle.net/zmnogytL/1/
HTMLは次のようになります。

<div id="parent"> 
    <div class="messages"> 
     <span id="jstext"></span> 
    </div> 
    <div class="input-area"></div> 
</div> 

コンテンツは、その高さを超えたときに、メインのdiv（灰色1）が展開するべきではありませんその中にスクロールバーがあります。 下のdiv（青色）は常に同じ場所に留まるべきです。

数え切れないほどの時間を過ごしても、私はそれが私がしたいと思うように動作するようにはなっていません。

ありがとうございます！

Answer 1

それを試してみてください。

.messages{ 
    overflow:scroll; 
    max-height: calc(100% - 100px); 
}