【CSS】flexでmax-heightやmax-widthが効かない場合の原因と対処法

flexレイアウトを使っていると、子要素にmax-heightやmax-widthを指定しているのに思った通りに制限が効かない、ということがあります。この記事では、flex時にmax-height・max-widthが効かない主な原因と、それぞれの対処方法を紹介します。

原因① 親要素や自分自身に「縮める」設定がない

flexコンテナのデフォルト挙動では、子要素はできるだけ伸びようとします。特に親要素がalign-items: stretchになっていると、高さが親いっぱいに広がるため、max-heightが無視されることがあります。

.parent {
  display: flex;
  align-items: flex-start; /* 子要素が必要以上に伸びるのを防ぐ */
}

これにより、子要素は自分の高さに合わせるようになります。

flexアイテムには、暗黙的にmin-width: auto;やmin-height: auto;が設定されています。これが原因で、max-widthやmax-heightを超えて広がってしまうことがあります。

.child {
  min-width: 0;
  min-height: 0;
  max-width: 200px;
  max-height: 100px;
}

min-width: 0やmin-height: 0を指定することで、制限が正しく働くようになります。

子要素の中にあるテキストや画像などのコンテンツサイズが大きい場合、max-widthやmax-heightを超えてしまうことがあります。このときは、オーバーフローを制御する必要があります。

.child {
  overflow: hidden; /* 超えた分を隠す */
}

もしくはoverflow: auto;を使うと、必要に応じてスクロールバーを表示することもできます。

Q. Flexboxでmax-height・max-widthが効かない原因は何ですか？

A. flex-growやflex-shrinkによって要素が伸縮し、max値を超える場合があります。flex: none;またはflex-shrink: 0;を指定すると改善することがあります。

Q. Flexコンテナ内でmax-widthを確実に適用するには？

A. 子要素にmin-width: 0;を追加することで、Flexboxのデフォルト動作を上書きしてmax-widthが正しく機能するようになります。

Q. flex-basisとmax-widthの優先順位はどうなりますか？

A. max-widthはflex-basisより優先されます。ただしflex-growが効いている場合、最終的なサイズがmax-widthを超えることがあるため注意が必要です。

flexレイアウトでmax-heightやmax-widthが効かないときは、次のポイントをチェックしましょう。

これらを意識するだけで、flexレイアウトでも意図通りにサイズ制御ができるようになります！