flexboxのshinkについて、指定した幅以上はshrinkしないようにする方法について

Question

実現したいこと

横並びのボックス３つについて

真ん中の要素だけ下記のように指定したとします。
flex-shrink: 0;

画面横幅を狭めると両サイドの要素だけ縮むと思います。

この時、両サイドの要素について、最低幅以上は縮まらないように指定するようなことはできませんか？

発生している問題・分からないこと

質問と同じ内容です。

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

真ん中のbox要素にmin-widthを設定しましたがうまくいきませんでした。

補足

特になし

Answer 1

画面横幅を狭めると真ん中の要素だけ縮むと思います。

いえ、逆にこの要素だけ縮まなくなります（MDN）。

Comments

[maisumakun]

何か前提条件などに誤りがあると思われますので、再確認いただければと思います。

[skywalker0402]

失礼しました。
真ん中の要素**以外**です！

ご指摘の通り両サイドの要素がshrinkすると思いますが
この両サイドのshrink幅を、これ以上はwidht:30px;のような形で指定できないかと悩んでいます。

[maisumakun]

> 真ん中のbox要素にmin-widthを設定しましたがうまくいきませんでした。

真ん中にかけずに、縮む方にかけてみたらどうなるのでしょうか。

[skywalker0402]

> 真ん中にかけずに、縮む方にかけてみたらどうなるのでしょうか。

回答ありがとうございます。
初歩的なミスでした🙇🙇

試したところ問題が解決しました！

ベストアンサーに選ばせていただきました。