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

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

メニューに幅を指定しなければ中身のサイズギリギリになる。

デフォルトでflex-basis: autoであることによる

コンテンツ側にflex-growを指定。

これで「メニューは伸びず、コンテンツだけ伸びる」になる

それだとメニュー側がピッチリしすぎてて嫌だったのでpaddingを指定した

flexbox以前の古い知識でwidth: 20%とかつけてしまったが、必要なかった

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