flexboxを利用してサイドバーを作るときに困ったことがあったので解消した

flexboxを使って、良くあるサイドバーを作ろうとしました。

flexで左側がサイドバー、右側がメインコンテンツです。

そして、サイドバーは幅が決まっているので固定し、メインコンテンツはそれ以外で使用したいので width: 100%; をあてます。

このメインコンテンツに100%を当てた瞬間に左のサイドバーがちょっと小さくなっちゃうんです！！

あれ〜〜、おかしいな〜〜、width: 300px;を指定しているはずなのにな〜〜。
なんでかな〜〜

調べたら一発で解決しました。

サイドバーに flex-shrink:0; を当てればよかったのです。

これで、きちんとwidth: 300px;が保たれました。
めでたし。めでたし。