【CSS】Flexboxで横幅指定が効かない原因と解決方法

Flexbox を使ってレイアウトを組んでいると、「横幅を指定したのに反映されない」「子要素のサイズが意図通りにならない」といった問題に遭遇することがあります。これは Flexbox の特性やデフォルトの挙動に起因することが多いです。本記事では横幅指定が効かない原因と、その解決方法を解説します。

原因1：flexプロパティの初期値

Flexbox の子要素にはデフォルトで flex: 0 1 auto; が適用されています。この flex-shrink: 1 が効いているため、横幅を指定していても親要素の幅に合わせて縮小されることがあります。

.item {
  width: 200px; /* 指定しても縮む可能性がある */
}

幅を固定したい場合は flex-shrink: 0; を指定します。

.item {
  width: 200px;
  flex-shrink: 0; /* 幅が縮まない */
}

Flexbox では flex-basis が width より優先されます。
flex-basis の初期値は auto で、この場合は width が参照されますが、flex に数値を指定すると flex-basis が上書きされ、意図通りにならないことがあります。

.item {
  flex: 1; /* この場合 flex-basis は 0 になる */
  width: 200px; /* 無視される */
}

横幅を優先したい場合は flex-basis を指定します。

.item {
  flex: 0 0 200px; /* 幅200pxに固定 */
}

親コンテナに display: flex; を指定していても、親の幅が制約されていると子の横幅指定が反映されません。例えば、親に overflow: hidden がある場合や、親の幅自体が小さい場合です。

親要素の幅やレイアウトを見直し、子要素が正しく配置できるよう調整します。必要であれば min-width を設定し、縮みすぎを防ぎます。

.item {
  min-width: 200px;
}

box-sizing が border-box でない場合、padding や border が width に含まれず、結果的に意図通りのサイズにならないことがあります。

.item {
  box-sizing: border-box;
}

Flexbox で横幅指定が効かない場合は、次の観点をチェックすると解決しやすいです。

Flexbox は柔軟性が高い分、デフォルト挙動を理解しないと意図通りになりません。今回紹介した原因を押さえておけば、横幅指定のトラブルをスムーズに解決できるでしょう。