А не поможете с Flexbox и IE11?

Question

[Skrolea]

Добрый день. Есть макет состоящий из main и aside. Пример.

<div class="container">
 <main>  
   main content
 </main>
 <aside>
  aside content
 </aside>
 </div>

С помощью media queries, при низких разрешениях, я превращаю flex-direction: row; в flex-direction: column;. В chrome всё работает, но в IE11 aside и main наезжают друг на друга. Как исправить?
Пример

Я вижу в known issues caniuse.com/#feat=flexbox баги с IE, но не совсем понимаю как тут это использовать

Answer 1

[Дима Паутов]

В IE11 нельзя прижимать футер при помощи flexbox с использованием min-height: 100%, т.к. все дочерние элементы не видят этой высоты. От чего и получается, что один наезжает на другой. Это баг самого браузера.

В данном случае это реализовано у блока .container

Answer 2

[Сергей Горячев]

https://jsfiddle.net/fy1v5qq4/6/
Если убрать свойства flex у main и aside, все работает.
Перестроение работает нормально.
Отсюда начинаем плясать.

Еще у тебя незакрытое свойство.

.container {
min-height: 100% // не хватает точки с запятой
  display: -ms-flexbox;

но это просто для заметки, на проблема не влияет.

Comments

[Skrolea]

Хм. А какое дело у IE до того, что у меня main и aside имеют свойство flex? Странный баг, конечно. Ну я могу обернуть содержимое main и aside еще в один div, а ему уже присваивать flex, но странно. Попробую, спасибо. Отпишу
P.S. свойство не закрыл, да. в jsffidle правил, не закрыл

[Сергей Горячев]

Skrolea: Я не знаю, какое ие дело до свойства) Я просто показал, где проблемное место :)))

[Сергей Горячев]

Skrolea: Быть может это как-то связано с тем, что ему не нравятся современные HTML5 элементы, попробуйте дивами, по старинке.

[Сергей Горячев]

Skrolea: https://jsfiddle.net/fy1v5qq4/7/
Хотя наверно Дима Турков прав, 100% не работает, можно через 100vh.

[Skrolea]

Еще сработало, когда я блок main добавил

ms-flex: 1 1 auto;
      -webkit-flex:1 1 auto;
          flex: 1 1 auto;