Hy
У меня возникают проблемы с flex в IE:
Обратите внимание, что элемент #two имеет flex: auto, который должен расширять его для заполнения контейнера, даже если этого недостаточно.
Но это происходит только в Chrome и Firefox. В IE это просто не работает.
is flex-grow не поддерживается IE?
В случае, если кто-то пытается это сделать не на теле, а на каком-то дочернем div. Вы можете просто установить высоту: 0; на элементе с минимальной высотой.
IE просто хочет какую-либо высоту в родительском элементе элемента flex-grow auto.
Таким образом, это может выглядеть так:
.flex-parent{
display: flex;
min-height: 300px;
height: 0;
}
.flex-child{
flex: 1 1 auto;
}
IE требует flex: 1 1 auto
он не понимает, flex: 1
Это происходит потому, что вы используете min-height на <body> для получения полной высоты. Для интернет-исследователя вам необходимо использовать свойство height (используйте 100% или 100vh).
Я буду использовать -ms-flex: 1 1 auto;
Потому что IE не имеет полной поддержки flex. Должно быть с префиксом.
Не уверен, что вы пытаетесь достичь, но не так, как работают макеты Flexbox. Чтобы использовать свойство "flex" для элемента, он должен находиться внутри родительского элемента, который имеет свойство display: flex.
<style>
#flexContainer {
display: flex;
}
#item1 {
width: 50px;
background: #66CC33;
flex: 1;
}
#item2 {
width: 50px;
background: #0099FF;
flex: 5;
}
#item3 {
width: 50px;
background: #66CC33;
flex: 10;
}
</style>
<html>
<div id="flexContainer">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
</div>
</html>
Это нормально в Chrome, Firefox, Safari, IE11, IE10
<html>
<style>
*{
padding: 0;
margin: 0;
}
.app{
display: flex
}
.wrapper{
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
}
section{
flex: 1 0 auto;
}
header, footer{
height: 60px;
background: blue;
}
</style>
<div class="app">
<div class="wrapper">
<header></header>
<section></section>
<footer></footer>
</div>
</div>
</html>