CSSで幅、高さの部分的な固定、可変を実現する方法

フロントを開発しているとサイドメニューは固定で、残りにメインコンテンツを目一杯表示させるということがよくあります。

今回はそれをCSSで実装する方法を紹介します。

今回紹介する方法では固定幅部分はコンテンツに合わせたサイズになります。
幅をハードコーディングしなくてもきれいにレイアウトできるので気に入っています。

横方向サンプル

See the Pen row-variable-width by keyhole0 (@keyhole0) on CodePen.

縦方向サンプル

See the Pen column-variable-height by keyhole0 (@keyhole0) on CodePen.

解説

この幅固定、可変はflexboxを利用しています。
親DOMのCSSは以下の通りです。

.parent {
  display: flex;
  flex-direction: row; /* 横向き */
}

.parent {
  display: flex;
  flex-direction: column; /* 縦向き */
  
  height: 100vh; /* 高さの指定をしないと機能しません */
}

幅を固定したい箇所には以下のCSSを当てます。

.child-fixed {
  flex-shrink: 0;
}

flex-shrinkはフレックスアイテムの縮小係数を設定します。
数字が大きくなるほど他のフレックスアイテムに比べて小さくなります。
0にすることで全く縮まなくなり、そのDOM内容にピッタリフィットする幅になってくれます。

幅を可変にしたい箇所には以下のCSSを当てます。

.child-variable {
  flex-grow: 1;
  overflow: auto;
}

flex-growはフレックスアイテムの伸長係数を設定します。
数字が大きくなるほど他のフレックスアイテムに比べて大きくなります。
複数の可変する箇所の幅をそれぞれ変えたいときは調整する必要がありますが、基本的に1固定で良いです。

要素がはみ出ることも考慮してoverflowを指定しておくと良いでしょう。