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

Гибкий дочерний элемент LHS в этом примере имеет заполнение 1em, и это приведет к переполнению родительского элемента 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 не работает.


css flexbox internet-explorer-11 internet-explorer-10
person Graeme Pyle    schedule 11.10.2013    source источник
comment
На самом деле вы можете обойти это для гибкости строки, просто используя ширину в CSS. Но высота не будет работать для изгибов столбцов. Вот версия столбца исходной скрипки: jsfiddle.net/GY4F4/7   -  person Graeme Pyle    schedule 11.10.2013

Ответы (5)


arrow_upward
30
arrow_downward

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

person smogg    schedule 05.05.2014

arrow_upward
25
arrow_downward

В 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
person Ariel    schedule 24.09.2016
comment
Отличный ответ, спасибо! В моем случае max-width работал нормально. - person jlh; 19.05.2020

arrow_upward
17
arrow_downward

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

-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.

person aljabear    schedule 08.12.2017
comment
-ms-flex-preferred-size: хорошо работает, когда слева и справа есть отступы. Спасибо! - person lucasjohnson; 03.08.2019

arrow_upward
8
arrow_downward

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

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

Скрипка

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

person Ian Devlin    schedule 03.02.2015

arrow_upward
0
arrow_downward

У меня нет доступа к IE10, но в IE11 мне пришлось явно установить для flex-basis значение auto:

flex: 0 1 auto;
person jekie    schedule 13.02.2019