HarioNote

<p>親要素の高さはウィンドウいっぱいに、そして複数の子要素のうち1つだけをウィンドウの余った高さ領域いっぱいにします。<br>
そしてその子要素は、孫要素に高さに関わらずウィンドウの高さが縮んだら縮んでスクロールバーが表示されるようにします。</p>
<p>説明が少し分かりづらいので画像を使って説明します。</p>
<p>以下のように各要素をレイアウトして、「data1~」がある領域はウィンドウ(ブラウザ)の高さに合わせて広がるようにしつつ、<br>
<img src="https://storage.googleapis.com/newt-files/453b040f-8482-4ee5-b87d-8cb8d08e62a6%2F2023-03-29_1.png" alt="2023-03-29_1.png"></p>
<p>ウインドウを縦に縮めた場合に↓のようになるのではなく、<br>
<img src="https://storage.googleapis.com/newt-files/e189dbb5-a77a-4493-b0cd-e1cc4a1ef045%2F2023-03-29_3.png" alt="2023-03-29_3.png"></p>
<p>↓の様になるようにします。<br>
<img src="https://storage.googleapis.com/newt-files/3795359b-955a-412e-877f-0fc10416b349%2F2023-03-29_2.png" alt="2023-03-29_2.png"></p>
<h2>ポイント</h2>
<ul>
<li>flexboxを使う</li>
<li>flex: 1を使う</li>
<li>overflow: autoを使う</li>
<li>うまくいかない場合はmin-height: 0を試してみる</li>
</ul>
<h2>実装例</h2>
<p>以下は最初に添付した画像の内容を実装したReactのコードです。<br>
Reactのコードといっても、「Root」や「FlexBox1」等はReactとemotionでstyleをあてているだけで、divにCSSを設定するのと同様です。</p>
<p>下部に記載されている「…= styled.div`…」あたりのコードと同等の記述をCSSで行えば、純粋なHTML+CSSで同じレイアウトを再現できるはずです。</p>
<pre><code>import styled from &quot;@emotion/styled&quot;;
import { FunctionComponent } from &quot;react&quot;;

const LayoutWithFlexboxPage: FunctionComponent = () =&gt; {
  return (
    &lt;Root&gt;
      &lt;FlexBox1&gt;
        Top
      &lt;/FlexBox1&gt;
      &lt;FlexBox2&gt;
        &lt;ul&gt;
          &lt;li&gt;data1&lt;/li&gt;
          &lt;li&gt;data2&lt;/li&gt;
          &lt;li&gt;data3&lt;/li&gt;
          &lt;li&gt;data4&lt;/li&gt;
          &lt;li&gt;data5&lt;/li&gt;
          &lt;li&gt;data6&lt;/li&gt;
          &lt;li&gt;data7&lt;/li&gt;
          &lt;li&gt;data8&lt;/li&gt;
          &lt;li&gt;data9&lt;/li&gt;
          &lt;li&gt;data10&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/FlexBox2&gt;
      &lt;FlexBox1&gt;
        Bottom
      &lt;/FlexBox1&gt;
    &lt;/Root&gt;
  );
};

const Root = styled.div`
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: 20px;
  background-color: lightblue;
`;

const FlexBox1 = styled.div`
  background-color: lightcoral;
  display: flex;
`;

const FlexBox2 = styled.div`
  background-color: lightgreen;
  display: flex;
  flex: 1;
  overflow: auto;
`;

export default LayoutWithFlexboxPage;

</code></pre>
<p>以上です。</p>
<h3>補足</h3>
<ul>
<li>MUI等の<code>Box</code>を使用する場合、うまくいかなければ上記の例でいうところの「FlexBox2」に「min-height: 0」を指定してみてください。</li>
<li>親要素(Root)の高さは「100%」でもいいですが、さらに親の要素にも「height: 100%」が設定されていないと期待した振る舞いをしないことがあるため「height: 100dvh」を指定しています。</li>
</ul>


#HTML/CSS

【HTML/CSS】ウィンドウ(親)の余った領域の高さいっぱいに子要素を広げつつ、ウィンドウサイズが小さくなったら子要素がまずスクロール可能になるようにする【React】