J. Doe J. Doe - 18 days ago 8
CSS Question

Flexbox not working in Internet Explorer 11

This piece of code works fine in Firefox, Chrome and Edge, but it does not work properly in IE11 because of flex model, apparently. How can I fix it?

This is how it looks in Firefox

enter image description here

This is how it looks in IE11

enter image description here



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>




Answer

It is likely related to the min-height bug on IE11, try this:

Change body { min-height: 100%; } to body { height: 100%; }

And if your have large length of content and need to scroll, add this:

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>

Comments