挑戦する
ページ上のブロックでは、2つのネストされたブロックを配置して、1つのブロックが最大の高さを持ち、2番目のブロックが親ブロックの残りのすべての高さを占有する必要があります。 さらに、コンテンツがブロックに収まらない場合は、スクロールを追加します。
実装
このタスクを実装するとき、CSS Flexboxを使用することが決定されました。
まず、コンテンツに関係なく問題を解決する必要があります。 2つの空の子ブロック：
仕組み
親ブロック（図の緑色で表示 ）は、 表示するように設定されています：flex; およびフレックス方向：列。 コンテンツの方向を設定します。 子ブロックにはflexスタイルが与えられます：0 0 auto; 高さがわかっているブロック、およびflex：1 0 auto; すべての空き領域を広げるために突き合わされたブロック用。 この場合の2番目のブロックの「1」は「欲」を意味します。 貪欲なブロックは、貪欲でないブロックよりも多くのスペースを占有します。 この場合、貪欲度が低いほど高さが設定され（最大高さを設定できます）、貪欲度が高いブロックほどすべての空きスペースが占有されます。
下部ブロックにコンテンツを追加します
スクロールを追加するには、 overflow：autoを指定するだけです。
上のブロックにコンテンツを追加します
一番下のブロックと同じくらい簡単で、うまくいきません。 これは、flexがコンテンツとコンテンツの高さを考慮しているためです。
この問題を解決するには、コンテンツを絶対に配置し （ 位置：絶対; ）、そのtop、right、bottom、leftプロパティをゼロに設定する（ブロックに合わせてストレッチする）必要があります
これで、ブロックは必要なサイズになりますが、コンテンツはそこから出てきます。 この問題を解決するには、 位置を設定する必要があります。 オーバーフロー：自動;
出来上がり、スクロール付きの2つのブロックがあり、1つは最大の高さで、もう1つは空き領域全体に広がっています。
結果（HTML）：
<div class="container"> <div class="first-child"> <div class="first-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </div> </div> <div class="second-child"> <div class="second-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </div> </div> </div>
結果（SCSS）
.container { display: flex; flex-direction: column; width: 150px; height: 200px; background-color: #A5D6A7; .first-child { flex: 1 0 auto; position: relative; overflow: auto; width: 125px; box-sizing: border-box; background-color: #90CAF9; .first-content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 5px; } } .second-child { flex: 0 0 auto; width: 125px; max-height: 75px; padding: 5px; box-sizing: border-box; overflow: auto; background-color: #CE93D8; } }
PS実際の例はこちらにあります。