IE11におけるflexboxの挙動

Question

flexboxについて、chromeで同様のコードを確認した際には意図通りの表示となりますが、
IE11で確認時、flexboxの幅が保持されず、潰れたような表示となってしまいます。

codepen

widthをcalcではなく固定値（この場合計算の結果である190px）等にすると意図通りに表示されます。
calcのネストについても他箇所では問題がないため、原因が不明な状況です。

よろしくお願いします。

コード

​<div class="block">
  <ul class="list">
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ul>
</div>

​.list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  justify-content: space-between;
  
  li {
    background-color: #ccc;
    box-sizing: border-box;
    padding: 10px 0;
    text-align: center;
    width: calc(calc(100% - 30px)/3);
  }
}

.block {
  background-color: #000;
  margin: auto;
  max-width: 600px;
}

Answer 1

こちらが参考になるかと思います。
https://qiita.com/sawadays0118/items/bd0731878e9eb49c03f5#-transform%E3%81%AE%E5%80%A4%E3%81%A7calc%E3%82%92%E4%BD%BF%E3%81%86%E3%81%A8%E5%8A%B9%E3%81%8B%E3%81%AA%E3%81%84

Comments

[T_sa]

確認いたしましたが、calc()との組合せで既知のflexboxのバグであるflex-basisも指定していないため初期値のflex-basis: auto;となっており、問題がないように思います。
具体的にどの部分がまずいなどご指摘いただくことは可能ですか？

[退会済みユーザー]

参考記事は勘違いでした。申し訳ありません。
calcは入れ子にしていると効かないようです。
width: calc((100% - 30px) / 3);
にすれば期待通りになりました。