Flex-basis auto, 100% и IE. Не работает. Баг или фитча.. Как правильно?

Question

[Северное Сияние]

https://jsfiddle.net/kwoy4shm/

Открыть в IE и в другом браузере. В примере два flex-блока
Первый - трехколончатый макет, в центральный блок которого заключен двухколончатный макет.
Ниже, для примера - двухколончатый макет.

Суть в том, что отдельный двухколончатный макет отрабатывает как надо.

Лучится только указанием flex-basis: 100% для правого столбца двухколончатого макета - https://jsfiddle.net/kwoy4shm/1/.

Вопросы:
1. Верстка правильная и это IE фейлит или я что-то не так делаю?
2. Имеет ли вообще смысл auto указывать для flex-элементов, я так понимаю, это как бы задание величины контейнера по содержимому, но в случае указания flex-grow: 1 это аналогично, по сути, flex-basis: 100%. Так?

Comments

[Rustam Bainazarov]

Это баг IE11. Лечится указанием flex-basis, кроме auto.

[Северное Сияние]

Рустам Байназаров, а что лучше указывать - auto или 100% с точки зрения правильности и гуманности?

[Rustam Bainazarov]

Северное Сияние, сейчас покажу разные варианты, которые работают в IE11 (и везде). А так — 100%.

Answer 1

[Rustam Bainazarov]

Это баг IE11. Лечится указанием flex-basis, кроме auto. Обычно ставится либо нужное значение, либо просто 100% в качестве эдакого аналога auto.

Кстати, если нужно использовать calc() вместе с flex-basis, то нужно писать его отдельно (второй пример), а не в составе свойства flex.

Вот разные варианты, которые работают в IE11:



Ещё вместо 100% можно поставить 0% (именно с процентом, а не просто нуль) или 1px, но там были какие-то баги в этом случае в других браузерах (в Chrome какой-то версии текст за пределы такого блока выходил, например).

Если по какой-то причине нужно такое сделать только в IE11, то нужно код обернуть вот в этот хак:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* Код тут будет работать только в IE10 и IE11 */
}

Comments

[Северное Сияние]

Спасибо. С багом понятно.

Мне теперь вот что интересно - auto и 100% - концептуальные отличия!

Если у нас вот опять же две колонки ( https://jsfiddle.net/q247sLon/1/ ) правая 100% - это правильно так указывать? Ведь такого-же результата (резинового блока) можно достичь при flex-grow:1 и flex-basis:auto https://jsfiddle.net/q247sLon/2/

[Rustam Bainazarov]

Северное Сияние, скажите, а какого эффекта вы хотите достичь? Какого размера должна быть каждая из колонок?

[Северное Сияние]

Рустам Байназаров, если говорить про двухколончатыймакет, то левая - фиксированная, правая - резиновая. Я уже добился всего, спасибо за консультацию. Меня теперь более теория интересует и "как правильно" с точки зрения CSS.

[Rustam Bainazarov]

Северное Сияние, если у родителя не задавать flex-wrap: wrap, то у правой колонки вполне спокойно можно и flex-basis: 100%.