CSSで段組レイアウト：固定幅＋可変幅

基本形

先ず2つのboxを用意し、両boxをdivで囲みます。

<div id="wrap">
  <div id="boxA">
    <p>boxA</p>
    <p>A A A・・・A</p>
  </div>
  <div id="boxB">
    <p>boxB</p>
    <p>B B B・・・B</p>
  </div>
</div>

#boxA {
  border: 10px solid pink;
}

#boxB {
  border: 10px solid lightblue;
}

Flexboxで2段組み

ウィンドウ幅や画面幅が広がった場合に横並びになるようにします。

CSS変更

@media screen and (min-width:641px){
  #wrap	{
    display: flex;
  }

  #boxA {
    box-sizing: border-box;
    width: 300px;
  }

  #boxB {
    box-sizing: border-box;
    width: calc(100% - 300px);
  }
}

1

ブレイクポイント（縦並びと横並びの境目）で、641px以上で横並びにしています。

3

Flexboxで子要素を横並びにします。

7,12

widthがborderの太さ込みでの幅指定になります。borderがない場合は不要です。

8

サイドバーを固定幅で指定します。

13

コンテンツの幅を指定します。ウィンドウ幅によって可変になります。

結果

実際の様子（デモ）

実際に、PCでウィンドウ幅を変えたり、スマートフォンなどで縦横を変えてみてください。

背景の縦線の間隔は100pxです。

左右逆にする

固定幅サイドバーを右に、可変幅コンテンツを左になるようにします。

CSS変更

@media screen and (min-width:641px){
  #wrap	{
    display: flex;
    flex-direction: row-reverse;
  }
}

実際の様子（デモ）

固定幅+可変幅のまとめ

サイドバーにメニュー＋広い側にコンテンツとして、段組み構造におすすめです。

コンテンツ文は、ウィンドウ幅や画面幅に合わせて自動的に折り返されます。つまり、どんなウィンドウ幅や画面幅にも対応できます。