Ширины IE10 flexbox включают отступ, вызывающий переполнение. box-size: border-box не исправляет

В этом примере дочерний элемент Flex LHS имеет одно дополнение, и это приведет к тому, что RHS переполнит родителя:

<div style="display: -ms-flexbox; box-sizing: border-box; width: 200px; border: 5px solid black">

    <div style="padding: 1em; -ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 33%; background-color: blue; box-sizing: border-box">
        LHS
    </div>

    <div style="-ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 67%; background-color: red; box-sizing: border-box">
        RHS
    </div>

</div>

Здесь скрипка:

http://jsfiddle.net/GY4F4/6/

Как я могу устранить переполнение, когда у гибких детей есть отступы? box-sizing: border-box не работает.

Ответы

Ответ 1

У меня были аналогичные проблемы с flexbox и box-sizing: border-box;. Последний, похоже, не работает в IE. Ширина не будет работать в этом случае, так как padding изменит ее, но если вы можете использовать max-width, это должно устранить проблему.

Ответ 2

В IE flex-basis не учитывается box-sizing:border-box. Это ошибка, описанная здесь: https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box

Хотя теперь он исправлен в Edge.

Некоторые исправления:

  • Примените отрицательный маркер к своему контейнеру, чтобы противодействовать дочернему заполнению.
  • Использовать flex-basis: calc($basisValue - $paddingValue) ← это сработало лучше для меня
  • Используйте псевдоэлементы вместо заполнения, псевдоэлементы не считаются шириной
  • Используйте flex-basis: auto
  • Предельная ширина явно: max-width: $value

Ответ 3

Проблема представляет собой значение для -ms-flex-negative: 0 в поле с надписью, если оно установлено в 1, оно работает.

Фон RHS теперь останется в ящике, однако его содержимое не будет, хотя и то же самое с LHS. Добавление max-width: 100% в LHS исправляет это, но не в RHS, но добавляет word-break: break-all, после чего содержимое прерывается и остается в поле RHS.

Fiddle

Это то, что вы хотите?

Ответ 4

Я смог решить это, добавив:

-ms-flex-preferred-size: calc($basisValue - $paddingValue * 2);

Таким образом, эта комбинация работала даже при использовании autoprefixer:

.element {
    padding: 1rem;
    flex: 0 1 20%;
    -ms-flex-preferred-size: calc(20% - 2rem);
}

Значение calc удобно перепрограммирует автоматически сгенерированные префиксы, но только IE.