【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;を使うと、必要に応じてスクロールバーを表示することもできます。

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

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