挑戦する
ページ上のブロックでは、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実際の例は
こちらにあります。