flexbox を使った固定 + 可変レイアウトの実装方法です。
使用するケースとしては、サイドバー + コンテンツのレイアウト、入力画面のラベル + フォームレイアウト等といった場面でしょうか。
以下のようなサイドバーとコンテンツといったレイアウトにflexを使ってサイドバーを固定させる例です。
<div class="wrapper">
<div class="sidebar">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas
porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,
purus lectus malesuada libero, sit amet commodo magna eros quis urna.
</div>
<div class="contents">
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。
とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
</div>
</div>
.wrapper {
display: flex;
}
.sidebar {
width: 160px;
}
.contents {
flex: 1;
}
ポイントは 2 つ。
幅を固定したい要素にwidthを指定、可変する要素にflex: 1;を指定します。
flexプロパティは CSS ショートハンドで、flex: 1;はflex-grow: 1;、flex-shrink: 1;、flex-basis: 0;を指定していることになります。
以下、実装したプレビューになります。