最小限の横幅のサイドメニュー

コンテンツの横に最小限の横幅のサイドメニューを作りたい。

Flexboxを使う
メニューに幅を指定しなければ中身のサイズギリギリになる。
- デフォルトでflex-basis: autoであることによる
コンテンツ側にflex-growを指定。
- デフォルトは0
- これで「メニューは伸びず、コンテンツだけ伸びる」になる
それだとメニュー側がピッチリしすぎてて嫌だったのでpaddingを指定した
flexbox以前の古い知識でwidth: 20%とかつけてしまったが、必要なかった html

<div style="display: flex">
  <div style="background: green; flex-grow: 1">
    contents
  </div>
  <div style="background: red; padding: 2px">
    menu
  </div>
</div>