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

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

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

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

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

デフォルトは0

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

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

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

https://gyazo.com/8c5966540dd1747f2214e5982110dbec

https://gyazo.com/d87b96100f2a6047f40b6ff699c58877

code:html

<div style="display: flex">

<div style="background: green; flex-grow: 1">

contents

</div>

<div style="background: red; padding: 2px">

menu

</div>

</div>