Как сделать хак для IE10\11 на Flexbox?

Question

[abbrakadabbra]

Заверстал страницу частично на flexbox'ах. Все работает во всех браузерах, но в IE11 (и ниже) появился какой-то глюк - на блок, где начинается флекбокс при самом минимальном разрешении (верстка адаптивная) налезают все нижеидущие блоки (не флексы).

Потыкал свойства - оказывается ему не нравится flex:1 и flex:2, которые прописаны для 2-х колонок. Сделал flex: 0 и тогда работает.

***upd***: работает еще если для элемента вообще отключить display: flex (превратить его обратно в block), тогда поток встает на свои места.

Теперь не знаю как прописать этот стиль ТОЛЬКО для IE и ТОЛЬКО для нужного разрешения.

Кто-нибудь может подсказать? Заранее спасибо!

Answer 1

[glenean]

Дайте скриншот из IE и код html и css на jsfiddle
Попробуйте после элемента flex поставить элемент

<div style="height: 1px; display: block; oveflow: hidden;">

Попробуйте элементу flexbox задать css свойство overflow: hidden

Comments

[abbrakadabbra]

Нашел хорошую статью, думаю проблема где-то там. css-live.ru/articles/uporyadochivanie-bagov-krossb...

Ну а пока сработало вот так (только все-равно не знаю как подключить это именно для IE) - задаю flex: 2 1 auto только для второй колонки.

[abbrakadabbra]

UPD: добавил просто oveflow: hidden как вы пишете для второй колонки и поток привелся в порядок. Что это за глюк чудной, вы тоже с ним встречались в IE?

[glenean]

abbrakadabbra: Пометьте, пожалуйста, мой ответ, как верный.
Я не знаю - интуиция

[abbrakadabbra]

glenean: помечу, спасибо :)

[abbrakadabbra]

Хорошо, что сработало. Хотя я не любитель добавлять пустые дивы-костыли.

[trushka]

Ну, можно прописать в css с помощью ::after