横方向サンプル

縦方向サンプル

この幅固定、可変は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を指定しておくと良いでしょう。