Ширина флексбокса IE10 включает отступы, вызывающие переполнение. Размер коробки: рамка не исправлена

Дочерний элемент LHS flex в этом примере имеет заполнение 1em, что приведет к переполнению RHS родительского элемента:



    
        LHS
    

    
        RHS
    


Вот'S скрипка:

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

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

Ответы на вопрос(5)

-ms-flex-negative: 0 на поле с отступом, если оно установлено в 1, оно работает.

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

скрипка

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

но в IE11 мне пришлось явно установить flex-based на auto:

flex: 0 1 auto;

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

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

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

ВАШ ОТВЕТ НА ВОПРОС