Задать вопрос
php666
@php666
PHP-макака

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

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%. Так?
  • Вопрос задан
  • 848 просмотров
Подписаться 3 Средний 3 комментария
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
Это баг 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 */
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы