![「flex:1;で解消しない『潰れ』はflex-shrink:0;」のアイキャッチ画像](/images/tmb/css-flex-bug.jpg)
iPhoneで自分のブログを見ていたら、表示が乱れてる...
![](/images/css-flex-bug-1.jpg)
これはFlexboxを使うとたまに発生します。今まで通り、幅を自動調整して欲しい要素にflex: 1;
を追加...されてました。すでに。
![](/images/css-flex-bug-2.jpg)
解決策:潰れてほしくない要素に flex-shrink: 0;
潰れてほしくない要素にflex-shrink
を指定することで解決しました。
flex-shrink: 0;
![](/images/css-flex-bug-4.jpg)
ただ、このままだとタイトルが右に見切れてしまってます。そこで、幅を自動調整して欲しい要素にoverflow: hidden;
を追加。これで想像通りの形になりました。
![](/images/css-flex-bug-5.jpg)
ただ、flex: 1; がなくてもちゃんと動く
試しにflex: 1;を消してみたところ、乱れることはありませんでした。
![](/images/css-flex-bug-6.jpg)