Flexboxでサイドバー固定幅の2カラムをつくるやり方

ブログなどでよくみかける、サイドバー固定幅の2カラムをFlexboxでレイアウトするときのやり方を説明します。

<div class="box">
  <div class="box-A">
  box-A
  </div>
  <div class="box-B">
  box-B
  </div>
</div>
.box {
  display: flex;
}

.box-A {
  flex: 1;
}

.box-B {
  flex: 0 0 300px;
}
【スクリーンショット】Flexboxで2カラムレイアウト
コードを試してみた結果

このコードの他に、装飾用としてbackground-color, height, font-sizeなどを指定しています。

基本的にはたったこれだけで、box-Bを300pxに固定した2カラムにレイアウトすることができます。
box-Aは、ブラウザの横幅に合わせて伸び縮みします。

floatでレイアウトするよりも楽で簡単なので便利ですが、Internet Explorer11などでは、バグでレイアウトが崩れたりする
おそれもあるので実装するときは注意も必要です。