div内の子要素の高さを自動調整する方法

HTML
1<div id="panel" style="height:300px; background-color:#cccccc">
2<div id="header">動的生成される部分</div>
3<div id="contents" style="overflow: auto;">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br></div>
4</div>

上記のような構成の時、このままではcontentsの内容がpanelをはみ出して表示されますが、これをpanel内に収まるように表示させたいです。
具体的にはcontentsにスクロールバーを表示させたいと考えています。

contentsのstyleにheight:100%を追加すればほぼ目論見どおりcontentsにスクロールバーがつくことはわかっているのですが、こうすると当然ながらheaderの高さ分がはみ出してしまいます。

headerとcontentsの高さを自分で指定してやれば解決だと思うのですが、headerはJavaScriptで動的生成される部分のため高さ固定をしたくないと考えています。
この場合、CSSのみで目的を達成できるものでしょうか？

よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1#panel {
2  height:300px;
3  background-color:#cccccc;
4  display: flex; /* ADD */
5  flex-direction: column; /* ADD */
6}
7```**動くサンプル：**[https://jsfiddle.net/eeob3tL3/](https://jsfiddle.net/eeob3tL3/)