All geek questions in one place

IE11 incorrectly calculates parent flex container height

I am trying to use flexbox based layout to display a page with a sticky footer. This works well with short pages (less than the height of the window) in all browsers. However, the same approach with long pages works in Firefox, but IE11 reduces the container element to about 25% of the child element.

Here is an example: https://codepen.io/vers/pen/rraKYP

html {
  height: 100%;
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
div.container {
  max-width: 600px;
  background-color: #aaa;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  line-height: 1.5;
}
div.content {
  margin: 8px;
  flex-grow: 1;
}
div.header,
div.footer {
  background-color: black;
  color: #fff;
}
<html>

<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="content">
      <p>...</p>
      <!-- 40 long paragraphs here -->
    </div>
    <div class="footer">Footer</div>
  </div>
</body>

</html>
Run codeHide result
+4
source share
2 answers

height, . min-height.

:

html {
  height: 100%;
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

:

body {
  min-height: 100vh;      
  display: flex;
  flex-direction: column;
}

:

html {
  display: flex;
  flex-direction: column;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

Chrome, FF, IE11 Edge.

+4

IE11 flexbox vh. body 100%.

0

Source: https://habr.com/ru/post/1653735/

More articles:


All Articles