環境

IE11

問題点

IEでmin-width使用時の挙動がおかしい

コード

html
1<div class="box">
2    <div class="item sidebar">sidebar</div>
3    <div class="item main">main</div>
4</div>

css
1.box {
2    color: white;
3    display: flex;
4}
5
6.sidebar {
7    flex: 1;
8    -ms-flex: 1 0 0px;
9    flex-basis: 300px; //追記***
10    min-width: 300px;
11    padding: 10px;
12    background: red;
13}
14
15.main {
16    flex: 3;
17    -ms-flex: 3 0 0px;
18    background: blue;
19    padding: 10px;
20}

(上) IE11
(下) chrome

試してみたこと

LINK ここれへんを参考に下記コードを追記してみましたが、うまくいっておりません。

width: expression(document.body.clientWidth < 302? "300px" : "auto");

よろしくお願いいたします。

-millmill-

2020/07/06 16:59

>ここれへんを参考に下記コードを追記作成日見ましたか?「December 16th 2012 」8年も前の記事ですブラウザ対応もcssもどんどん変わっていきますのでできるだけ新しい記事を参考にしないと上手くいかない事が多いですよ^^;;

kazoogon

2020/07/06 17:10

作成日気にしていませんでした汗 https://stackoverflow.com/questions/53602763/flexbox-min-width-failing-in-ie-and-edge ↑(2018)こちら参考にして、flex-basisを追記しましたが、やはりmin-widthは効いていないのでmin-width自体が効くようなコードが必要ですね。。

-millmill-

2020/07/06 17:10

ちなみにIE11でflexにベンダープレフィックスは必要なくなっています。 flex: 1; = flex: 1 1 auto; を読んでいるはずです IEは色々バグがあるので min-widthを読まずにflexだけで動いてるのかも?

-millmill-

2020/07/06 17:18

flex-basis と flex-shrink: 0; 両方かけないとダメですなので、flex: 1 0 300px; ですねついでにboxも flex: 3 3 calc(100% - 300px); にしてみたらどうでしょう