Flexbox не работает в Internet Explorer 11

Этот фрагмент кода отлично работает в Firefox, Chrome и Edge, но он не работает должным образом в IE11 из-за модели flex. Как я могу это исправить?

Вот как это выглядит в Firefox

Вот как он выглядит в IE11

body * {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-flow: column;
  margin: 0;
}
main {
  flex: 1;
  display: flex;
}
header,
footer {
  background: #7092BF;
  border: solid;
  width: 100%;
}
section {
  border: solid;
  background: #9AD9EA;
  flex: 1
}
aside {
  border: solid;
  width: 150px;
  background: #3E48CC
}

<header>
  <p>header
</header>
<main>
  <aside>
    <p>aside
    <p>aside
  </aside>
  <section>
    <p>content
    <p>content
    <p>content
    <p>content
  </section>
</main>
<footer>
  <p>footer
  <p>footer
</footer>

Ответ 1

Вероятно, это связано с min-height bug в IE11, попробуйте следующее:

Измените body { min-height: 100%; } на body { height: 100%; }

И если у вас большая длина содержимого и нужно прокрутить, добавьте это:

section { overflow: auto; }

jsFiddle

body * {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  /* min-height: 100%; */
  height: 100%; /*added*/
  display: flex;
  flex-flow: column;
  margin: 0;
}
main {
  flex: 1;
  display: flex;
}
header,
footer {
  background: #7092BF;
  border: solid;
  width: 100%;
}
section {
  overflow: auto; /*added*/
  border: solid;
  background: #9AD9EA;
  flex: 1
}
aside {
  border: solid;
  width: 150px;
  background: #3E48CC
}

<header>
  <p>header
</header>
<main>
  <aside>
    <p>aside
    <p>aside
  </aside>
  <section>
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
    <p>content
  </section>
</main>
<footer>
  <p>footer
  <p>footer
</footer>

Ответ 2

См. "Могу ли я использовать" для полного списка ошибок IE11 Flexbox и т.д.

В IE11 и других браузерах существует множество ошибок Flexbox - см. flexbox on Can я Use → Известные проблемы, где ниже перечислены в IE11:

IE 11 требует добавления единицы к третьему аргументу, свойство flex-basis
В IE10 и IE11 контейнеры с display: flex и flex-direction: column не будут правильно вычислять размеры их гибких детей, если контейнер имеет min-height, но не имеет явного свойства height
IE 11 не вертикально выравнивает элементы при использовании min-height

Также см. список проблем и обходные пути для Philip Walton Flexbugs.

Ответ 3

Я тестировал полный макет, используя flexbox, он содержит заголовок, нижний колонтитул, основной корпус с левой, центральной и правой панелями, а панели могут содержать элементы меню или нижний колонтитул и заголовки, которые должны прокручиваться. Довольно сложный

IE11 и даже IE EDGE имеют некоторые проблемы с отображением гибкого контента, но его можно преодолеть. Я тестировал его в большинстве браузеров и, похоже, работает.

Некоторые исправленные, которые я применяю, - это ошибка высоты IE11, добавление высоты: 100vh и min-height: 100% к html/body. это также помогает не устанавливать высоту контейнера в dom. Также сделайте тело /html гибким контейнером. В противном случае IE11 сжимает представление.

html,body {
    display: flex;
    flex-flow:column nowrap;
    height:100vh; /* fix IE11 */
    min-height:100%; /* fix IE11 */  
}

Исправление для IE EDGE, которое переполняет контейнер flex: переполнение: скрыто на основном гибком контейнере. если вы удалите переполнение, IE EDGE wil выталкивает содержимое из окна просмотра вместо того, чтобы содержать его внутри основного контейнера flex.

main{
    flex:1 1 auto;
    overflow:hidden; /* IE EDGE overflow fix */  
}

Вы можете увидеть мое тестирование и пример на моей странице codepen. Я заметил важные части css с исправлениями, которые я применил, и надеюсь, что кто-то сочтет это полезным.