【対処法】Flexbox幅が「内部のテキスト長」の影響で変更してしまう

Flexbox幅が、内部に存在するテキスト長により拡大されてしまうケースの対処方法です。Flexboxを利用していると、たまに出くわす問題なので対処方法をしっかりおさえておきます。

可変 × 固定

See the Pen Flex_problem_long_text by waku-waku (@raku-raku) on CodePen.

ケース1(前提)

全体で 300px のうち、黄色箇所を 100px と固定しています。
なので、青色部分は 200px となります。

ケース2(問題発生)

しかし、青色部分に長いテキストが存在すると、幅が変動してしまいます。

ケース3(対処)

ケース1の幅のままで、長いテキストを表示するために、 min-width: 0; を指定しています。