IEでのmin-widthの扱いについて

Question

環境

IE11

問題点

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

コード

<div class="box">
    <div class="item sidebar">sidebar</div>
    <div class="item main">main</div>
</div>

.box {
    color: white;
    display: flex;
}

.sidebar {
    flex: 1;
    -ms-flex: 1 0 0px;
    flex-basis: 300px; //追記***
    min-width: 300px;
    padding: 10px;
    background: red;
}

.main {
    flex: 3;
    -ms-flex: 3 0 0px;
    background: blue;
    padding: 10px;
}

(上) IE11
(下) chrome

試してみたこと

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

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

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

Comments

[-millmill-]

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

[kazoogon]

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

[-millmill-]

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

[-millmill-]

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

[m.ts10806]

問題切り分けしてください。
min-widthだけで効くか、その他を１つずつ入れいってどこで効かなくなるか