flexアイテムのmax-heightとmax-widthがうまく機能しない問題の原因と解決策

背景

Flexboxレイアウトを使っていると、要素のmax-heightやmax-widthが期待通りに動作しない場面に遭遇することがあります。この記事では、その原因と解決策をわかりやすく解説します。

状況設定

今回の設定は以下の通りです。

• 登場人物は parent, fixed, text-container の３人
• parentはfixedとtext-containerの親要素で縦幅固定のフレックスコンテナ( height: 500px, direction: column )
• fixedは縦幅固定の要素( height: 100px )
• text-containerは残りの縦幅目一杯に伸びる要素( flex: 1 )
• text-containerには大量のテキストが入り、parentの縦幅からfixedの縦幅を差し引いた最大値400pxを超える可能性がある。その場合にはスクロールさせたいので max-height: 100% と over-flow-y: scroll を指定

今回問題となる状況を再現するHTMLとCSSのコードは以下の通りです。

<div class="parent">
  <div class="fixed">CFixed</div>
  <div class="text-container">
    大量のテキストがここに入ります。必要に応じてスクロールバーが表示されます。
    ... (大量のテキスト)
  </div>
</div>

.parent {
  display: flex;
  flex-direction: column;
  height: 500px;
}

.fixed {
  flex: 0;
  height: 100px;
}

.text-container {
  flex: 1;
  max-height: 100%;
  overflow-y: scroll;
}

問題

上記のコードでは、text-containerは親要素parentの残り領域いっぱいに広がり、コンテンツがmax-heightを超える場合はスクロールバーが表示されることを期待しています。しかし、実際にはtext-containerが400pxを超えて伸びてしまい、期待通りにmax-heightが機能しません。

原因

この問題の原因は、flexアイテムの初期設定にあります。flexアイテムでは、min-heightとmin-widthの値がデフォルトでautoになります。autoは、要素のコンテンツがすべて表示されるために必要な最小限の高さを指定します。

そのため、今回の状況ではmin-heightとmax-heightで下記のようなバトルが繰り広げられます。

• min-height: auto の主張: 「text-containerの子要素を表示するためには、最低でも〇〇px（例えば1000px）は必要だ！」
• max-height: 100% の主張: 「親要素parentの高さ500pxからfixedの高さ100pxを引いた400pxが上限だよ！」

このように、 min-height: auto がコンテンツの高さを優先しようとする一方で、 max-height: 100% が親要素の制約を受けようとするため、矛盾が生じて期待通りの動作にならないのです。

解決策

この問題を解決するためには、text-containerに対して min-height: 0 を明示的に指定します。

.text-container {
  flex: 1;
  max-height: 100%;
  overflow-y: scroll;
  min-height: 0; /* 追加 */
}

このように修正することで、それぞれの主張は以下のようになります。

• min-height: 0 の主張: 「0px以上なら別に構わないよ。」
• max-height: 100% の主張: 「親要素.parentと.fixedを考慮すると、最大で400pxだね。」

これで矛盾が解消され、text-containerは親要素の残り領域である400pxを超えて伸びることがなくなり、コンテンツが溢れた場合にはスクロールバーが表示されるようになります。

まとめ

このmin-heightの初期値がautoになっているという点は、Flexboxにおけるちょっとした落とし穴と言えるでしょう。max-widthについても同様の問題が発生することがありますので、注意が必要です。

この解決策を知っておくことで、Flexboxレイアウトでmax-heightやmax-widthが期待通りに機能しない場合でも、スムーズに問題を解決できるはずです。