メインコンテンツまでスキップ

よくある問題と解決法

Flexboxを使用していると遭遇しがちな問題とその解決方法を、実例とともに解説します。 これらの問題を理解することで、より効果的にFlexboxを活用できるようになります。

問題1: テキストがはみ出る・溢れる​

問題の発生例​

フレックスアイテム内の長いテキストが親要素からはみ出してしまう場合があります。

このテキストは非常に長く、コンテナからはみ出してしまう可能性があります
短いテキスト

なぜこの問題が起こるのか？​

Flexboxの縮小アルゴリズムとテキストレンダリングの競合

この問題は、以下の複合的な要因により発生します。

  1. フレックスアイテムのデフォルト最小サイズ

    • min-width は通常0がデフォルトだが、フレックスアイテムでは auto がデフォルトになる。
    • min-width: auto は、アイテムの「intrinsic minimum width」（内在する最小幅）を意味する
    • テキストの場合、これは最も長い単語の幅、または white-space: nowrap の場合はテキスト全体の幅

  2. ブラウザのテキストレンダリングエンジンの動作

    • テキストは通常、単語境界で改行される（overflow-wrap: normal がデフォルト）
    • white-space: nowrap が設定されている場合、改行が禁止される
    • この場合、テキストの幅がコンテナを超えても、ブラウザは改行せずに描画を続ける

  3. Flexboxの空間分配アルゴリズム

    • Flexboxは「available space」（利用可能な空間）を各アイテムに分配
    • しかし、アイテムの最小サイズ制約により、実際には指定された割合通りにならない場合がある
    • 特に flex: 1 の場合でも、min-width: auto により縮小できる幅が制限される

解決法1: min-width: 0 を設定​

min-width: 0 を設定することで、フレックスアイテムの暗黙的最小サイズ制約が解除され、テキストがコンテナの幅に合わせて縮小可能になります。

CSS
.flex-item {
  min-width: 0; /* 縮小を許可 */
  overflow: hidden;
  text-overflow: ellipsis;
}
このテキストは非常に長く、コンテナからはみ出してしまう可能性があります
短いテキスト

解決法2: 改行を許可​

強制的な改行を許可することで、テキストがコンテナ内に収まるようにします。

CSS
.flex-item {
  overflow-wrap: break-word;
}
このテキストは非常に長く、コンテナからはみ出してしまう可能性がありますが、改行されます
短いテキスト
備考

文章の折り返しの制御は複雑なので、文章の折り返し指定のCSS最新版 - ICS MEDIAを読むのがおすすめです。

問題2: フレックスアイテム内の子要素でheight: 100%が効かない​

問題の発生例​

フレックスアイテムの中にある子要素に height: 100% を設定しても、期待通りに親の高さいっぱいに広がらない場合があります。

height: 100%が効かない
通常のコンテンツ

なぜこの問題が起こるのか？​

この問題は、FlexboxとCSSの height: 100% の計算方法が関係しています。

  • height: 100% は親要素の指定値（specified value）を基準に計算される1
  • 親要素に幅/高さが明示的に指定されていない場合、その値は不定値（indefinite size）となる2
  • 親要素が不定値（indefinite size）の場合、height: 100%はautoと計算される3
  • height: auto は内容物に応じた高さに自動で調整される

解決法1: align-items: stretch を利用（推奨）​

align-items: stretchが指定されると、そのフレックスアイテムの交差軸の大きさは確定した物として扱われ、%指定が有効になります。4

CSS
.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch; /* デフォルトなので省略可能 */
}

.flex-item {
  /* height指定なし */
}

.child-element {
  /* height: 100% を削除 */
  /* Flexboxの伸縮で自然に高さが決まる */
}
自然に親の高さまで伸びる
通常のコンテンツ

解決法2: min-heightを使用​

min-height: 0 を使用することで、より柔軟な高さ制御が可能になります。

CSS
.child-element {
  min-height: 0;
}
min-height: 0を使用
通常のコンテンツ
ヒント

最も推奨される解決方法は解決法1です。height: 100% に依存せず、Flexboxの自然な動作を活用することで、ブラウザ間の互換性も確保できます。

Footnotes​

  1. 4.1. Percentage Sizing: CSS Box Sizing Module Level 3 ↩

  2. 3.2.1. “Behaving as auto”: CSS Box Sizing Module Level 3 ↩

  3. 10.5 Content height: the 'height' property ↩

  4. 11 Determine the used cross size of each flex item: CSS Flexible Box Layout Module Level 1 ↩