flexboxで幅固定と幅可変の横並びを実装する

メインコンテンツを可変、サイドバーを幅固定のレイアウトをflexboxで実装しようとした際に少し迷ったのでメモ。

サンプルコード

最初に上手くいかなかった例です。

HTML

<div class="contents">
	<div class="main">メインコンテンツ</div>
	<div class="sub">サイドバー<br>幅:<span class="sub-width"></span>px</div>
</div>

確認用に.sub-width部分にサイドバーの幅が入るようにします。

JavaScript

$(window).on('load resize', function() {
	$('.sub-width').text($('.sub').width());
});

最後にCSSです。
.contentsにdisplay flex、.subは固定幅、.mainはwidth 100%を指定しました。

CSS

.contents {
	display: flex;
}
.main {
	width: 100%;
}
.sub {
	width: 300px;
}

これで想定に近いレイアウトにはなったのですが、.subが指定した幅で固定になっていませんでした。
上手くいかなかった場合のデモページ

調べてみて、.mainにflex: 1と指定すると想定した形にすることができました。

CSS

.contents {
	display: flex;
}
.main {
	flex: 1;
}
.sub {
	width: 300px;
}

対応後のデモページ