Как исправить отображение элементов flexbox в ie11?

573

10 декабря 2016, 10:40

Добрый день. Не могу понять, почему в IE11 блок .main работает не корректно!

body { 
    margin: 0; 
    min-height: 100vh; 
 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flexbox; 
    display: flex; 
 
    -webkit-flex-flow: column wrap; 
    -ms-flex-flow: column wrap; 
    flex-flow: column wrap; 
} 
 
.header { 
    -ms-flexbox: 0 0 auto; 
    -webkit-flex: 0 0 auto; 
    flex: 0 0 auto; 
 
    height: 200px; 
    background: #777; 
} 
 
.main { 
    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1; 
 
    background: red; 
} 
 
.footer { 
    -webkit-flex: 0 0 auto; 
    -ms-flex: 0 0 auto; 
    flex: 0 0 auto; 
 
    height: 200px; 
    background: #777; 
}

<header class="header"></header> 
<main class="main"></main> 
<footer class="footer"></footer>

https://jsfiddle.net/un68kwwo/1/ - везде он работает хорошо, но в IE11 косяк, хотя у него поддержка flexbox очень даже хорошая.

Answer 1

Пробуем вот так:

* { 
  box-sizing: border-box;  
} 
 
html, body { 
    height: 100vh; //В IE работает только с 100vh, с min-height - не работает 
} 
body { 
    display: flex; 
	flex-direction: column;	 
} 
 
.header {     
    height: 200px; 
    background: #777; 
} 
 
.main {     
    width: 100%; 
    flex-grow: 1; 
    background: red; 
    padding: 20px; //Обязательно задаем хоть какой-то размер (здесь добавлен паддинг, чтобы в примере было видно, что .main отображается) 
} 
 
.footer {       
    height: 200px; 
    background: #777; 
}

<div class="header"></div> 
  <div class="main"> 
   Lorem ipsum 
  </div> 
  <div class="footer"></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как добавить кнопку поверх поля для ввода?

Как добавить кнопку в строке ввода чтобы это выглядело примерно так?

434

HTML

Есть ли разница между img и background-image?

472

HTML

Как сделать респонсив-svg по одной из осей?

Собственно, если svg задать viewBox, то он масштабируется, подгоняя свой размер под контейнерНо я хочу, чтобы он только по горизонтальной оси масштабировался,...

391

HTML

Передача имени ссылки в php файл

Имеется множество ссылок вида

322