HTML 要素が重なってしまう

Question

わからないこと

画像1のように画面を3分割して、ウィンドウの大きさが変わってもこのレイアウトを維持したいのですが、ウィンドウを小さくすると画像2のように青い部分が赤い部分と重なってしまいます。(わかりにくいですが右下のところが重なっています)
考えとしてはウィンドウが小さくなると赤い部分が青い部分を押し出すような感じにしたいのですがそれはできますか？

(画像1)
![

(画像2)

<div id="top">
  <h5 id="chat-top">
    <center>タイトル</center>
  </h5>
  <hr color="#303032">
</div>

<div id="middle">
  <div id="chat-scroll-area">
    
  </div>
</div>

<div id="bottom">
  <textarea id="sendMes" placeholder="" rows="1" maxlength="500"></textarea>
  <div id="setsub">
    <button id="setting" onclick="">設定</button>
    <button id="submit" onclick="submit_f()">チャット</button>
  </div>
</div>

Answer 1

上下のエリアの高さを固定、中央は変動、みたいなのであればFlexboxレイアウトを使うのが簡単かと思います。

下記は一例です。

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.kuro {
  background-color: black;
  color: white;
  height: 5rem;
  text-align: center;
}

.ao {
  background-color: blue;
  color: white;
  flex-grow: 1;
}

.aka {
  background-color: red;
  height: 5rem;
}
</style>

<div class="container">
  <div class="kuro">タイトル</div>
  <div class="ao"></div>
  <div class="aka"></div>
</div>

Comments

[Styfish]

ありがとうございます！！
うまくいったのですが一つ問題がありまして、aoのところにあとから要素を付け加えていくのですが、要素を足していき画面を超えるようになると上のkuroのところが潰されてしまうのですが、これはどうすればいいでしょうか？
aoはoverflow: scrollしています。

[Eggpan]

.aoの高さが大きすぎる場合に .kuro と .aka が縮んでしまう、という事象の対応であれば
.kuro と .aka に対して flex-shrink: 0; を入れれば縮まなくなります。

[Styfish]

ありがとうございます...無事解決しました。
本当にありがとうございます。