flex не поддерживает calc в IE11

Question

Я пытаюсь создать макет с помощью Flexbox.В одном из этих макетов я хочу 3 столбца равной ширины.Для этого я использую calc , чтобы установить ширину столбца.Это работает нормально в современных браузерах, но, конечно, в IE не хочет работать.Вот мой код:

.container {
  width:50vw;
  margin:0 auto;
  display:flex;
}
  .container > div {
    flex:1 0 calc(100% / 3);
  }

<div class="container">
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
</div>

Как я уже говорил, это прекрасно работает в современных браузерах, но в IE столбцы просто сворачиваются друг на друга, если я не использую определенный процент вместо calc.

Answer 1

Это известная ошибка.

IE 10-11 игнорирует calc() функции, используемые в flex сокращенных объявлениях.

Так как эта ошибка затрагивает только сокращение flexОбъявление в IE 11, простой обходной путь (если вам нужна только поддержка IE 11) - всегда указывать каждое свойство гибкости индивидуально.

source: https://github.com/philipwalton/flexbugs#flexbug-8

Таким образом, другими словами, вместо:

flex: 1 0 calc(100% / 3)

Попробуйте:

flex-grow: 1;
flex-shrink: 0;
flex-basis: calc(100% / 3);

---

Также учтите следующее: вам даже не нужна функция calc().

Если вы хотите три столбца равной ширины, это будет делать:

flex: 1

или

flex: 1 0 30%

или даже:

flex: 1 0 26%;

С flex-grow: 1 определено в сокращении flex, нет необходимости, чтобы flex-basis составлял 33,33%.

Поскольку flex-grow будет занимать свободное место на линии, flex-basis должно быть достаточно большим, чтобыприменять перенос (если это станет необходимым).

В этом случае, с flex-basis: 26%, достаточно места для полей, границ, отступов и т. д., но никогда недостаточношаг за четвертый пункт.