display:flexで子要素の横幅指定が効かないときの解決法

この間、flexboxを使ったとき、子要素の横幅指定が効かなかったので忘備録として解決方法を消化していきたいと思います。

CSSを一つ追加するだけで解決したので記事は短めです。

display:flex で横幅指定が効かないときの解決方法

子要素の下記の記述を追加するだけ。

.sample{
    flex-shrink: 0;
}

子要素なのでそれだけ注意。
これで解決しました！

flex-shrinkは子要素の縮小率を指定するパラメーターらしく、デフォルトだと自動調節がかかるみたいです。

私の場合はflexboxの中にさらにflexboxを作ってたので、それで自動調節がおかしくなっちゃったのかな？
0にすると勝手に幅を調節しなくなるので、widthの指定がきくようになりました！
参考にしてみてください！