[CSS] flexbox で 2カラム（固定＋可変）
固定幅と可変幅の2カラムを実現するためのCSSです。IEを除く最新ブラウザで対応しています。
<div id="contents">
<div id="side">固定</div>
<div id="main">可変</div>
</div>#contents {
width: 100%;
display: flex;
}
#side {
width: 250px; /* 固定幅 */
padding: 20px; /* 削除可 */
height: 100vh; /* 削除可 */
background: #DEE; /* 削除可 */
}
#main {
width: 100%;
flex: 1;
padding: 20px; /* 削除可 */
height: 100vh; /* 削除可 */
background: #CDD; /* 削除可 */
}See the Pen flexbox-2column by Mitsuaki KIDA (@kidatti) on CodePen.