flex-shrinkが同じなら同じ幅だけ縮む？基本の幅を含めた配分を見よう

横並びの二つの箱にflex-shrink:1を付けたら、どちらも同じピクセル数だけ小さくなるのかな。実際の縮小量は、その数字だけでは決まらないよ。

このページでは、基本の幅が200pxと100pxの項目を、合計より狭い親へ入れて比べる。Flexの基本が分かる人向けに、縮める量の考え方を小さな作例で確認するね。

足りない60pxをどう分けるか

親の内容幅を240px、項目の基本サイズをA=200px、B=100pxにする。gap・余白は0、両方のmin-widthは0として、最小幅による制限を外した例だよ。

.row { display: flex; width: 240px; gap: 0; }
.a { flex: 0 1 200px; min-width: 0; }
.b { flex: 0 1 100px; min-width: 0; }

基本サイズの合計は300pxなので、60px足りない。縮小の配分には、flex-shrinkの係数と基本サイズを掛けた値を使う。この条件の比は200:100、つまり2:1になる。

同じ1でも、AとBが30pxずつ縮むわけではないんだ。

Aだけ縮まない設定と比べる

作例で「Aは縮小しない」を選ぶと、Aのflex-shrinkが0になる。親の内容幅240pxではA=200px、B=40pxとなり、Bだけで不足分を受け持つ。

画面が狭く作例の親が240pxより小さくなる場合は、表示欄の実寸を使って比べよう。親をWとすると、両方1の状態では不足300−Wを2:1で配分する。固定の160px・80pxになるのは、Wが240pxのときだよ。

1. 初期状態の親の内容幅、A・Bの実測幅を見る。
2. 同じ係数でも、基本の幅が大きいAの縮小量が大きいことを確認する。
3. Aの係数を0へ切り替え、Aが200pxを維持することを見る。
4. 「最初から試す」で両方1へ戻す。

実際のカードには別の制約もある

この例は、縮小の比を見やすくするために条件を絞っている。長い単語、画像、min-width、max-width、枠や余白がある画面では、制約に当たった項目の扱いも計算に影響するよ。

はみ出しが起きたら、まず親の実寸・gap・各項目の基本サイズ・最小幅を確認する。収まらないからと係数を増やすだけでは、内容由来の最小幅が残る場合がある。min-width:0を付ける場合も、文字の折り返しや読める範囲を一緒に確かめたいね。

2026年10月29日にMDNの縮小係数の説明と照合し、作例の両モードをブラウザの実測幅で検証した。flex-growの配分、Flexの最小幅と長い文字へ進むと、条件を増やして考えられるよ。