flex-grow не работает в Internet Explorer 11

Hy

У меня возникают проблемы с flex в IE:

http://jsfiddle.net/EvvBH/

Обратите внимание, что элемент #two имеет flex: auto, который должен расширять его для заполнения контейнера, даже если этого недостаточно.

Но это происходит только в Chrome и Firefox. В IE это просто не работает.

is flex-grow не поддерживается IE?

Ответы

Ответ 1

В случае, если кто-то пытается это сделать не на теле, а на каком-то дочернем div. Вы можете просто установить высоту: 0; на элементе с минимальной высотой.

IE просто хочет какую-либо высоту в родительском элементе элемента flex-grow auto.

Таким образом, это может выглядеть так:

.flex-parent{
  display: flex;
  min-height: 300px;
  height: 0;
}
.flex-child{
  flex: 1 1 auto;
}

Ответ 2

IE требует flex: 1 1 auto

он не понимает, flex: 1

Ответ 3

Это происходит потому, что вы используете min-height на <body> для получения полной высоты. Для интернет-исследователя вам необходимо использовать свойство height (используйте 100% или 100vh).

Ответ 4

Я буду использовать -ms-flex: 1 1 auto; Потому что IE не имеет полной поддержки flex. Должно быть с префиксом.

Ответ 5

Не уверен, что вы пытаетесь достичь, но не так, как работают макеты 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>

Ответ 6

Это нормально в 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>