flexboxで幅を縮小しないようにする

flexboxで横並びの設定をした際、幅を縮小しないようにする方法をメモ。

サンプルコード

例として下記のようなコードで、.flexbox-valを改行させるようにして、.flexbox-keyを改行しないようにしたいとします。

<div class="flexbox">
	<div class="flexbox-key">新着情報</div>
	<div class="flexbox-val">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</div>
</div>

flexboxのみ設定すると.flexbox-keyの方も改行されます。

.flexbox {
	display: flex;
}

flexboxで横並びにするデモページ

.flexbox-keyに幅を指定した場合も同様で、.flexbox-keyのテキストは改行されたままです。

.flexbox-key {
	width: 80px;
}

flexboxで子要素に幅を指定するデモページ

flex-shrink: 0; を指定することで、.flexbox-keyは縮小されなくなるので改行されないようになります。

.flexbox-key {
	flex-shrink: 0;
}

これで意図した表示にすることができました。
flexboxで子要素にflex-shrink: 0;を指定するデモページ