IE11 flex:1 causes content to overflow when parent has no fixed height

Question

I have an element which depending on the scenario can have a fixed height or a height of auto / undefined.

I need a title at the top, and a footer at the bottom, with a content area in between which should fill the available space. Using flexbox and flex:1 works fine if the parent element has a fixed height, but in IE11 if no height is specified, the content in the element with flex:1 will overflow.

See example here: https://plnkr.co/edit/JymmiJUwrPxiM2qS?open=lib%2Fscript.js&preview

In the "Fluid height" demo, the content overflows onto the footer text. The content element (.body) occupies no space at all. I expect the content to dictate the height of the .body element.

I could have an extra class that turns off flex:1 if there is no fixed height specified, but I won't know this ahead of time, or have control over weather a height is specified or not. Also I'm not looking to use any other sticky footer solutions (table layout, absolute positioning, etc)

Code from plnkr:

<div class="container" style="height: 150px; margin-bottom: 50px;">
  <div class="title">Fixed height</div>
  <div class="body">
    Content
  </div>
  <div class="footer">Footer</div>
</div>


<div class="container">
  <div class="title">Fluid height</div>
  <div class="body">
    Content
  </div>
  <div class="footer">Footer</div>
</div>

.container {
  border: 1px solid #000;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px;
}

.title {
  border-bottom: 1px solid #ccc;
}

.body {
  -ms-flex: 1;
  flex: 1;
  /* overflow: auto; */
}

.footer {
  opacity: 0.5;   
}

score 2 · Accepted Answer · answered Aug 20 '20 at 17:13

For IE11 you need to reset flex-shrink to 0 for .body, Also, prefix are not needed (i run a genuine IE11 to let you know):

https://jsbin.com/takanicuyi/1/edit?html,css,js,output //works with IE11

.container {
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px;
}

.title {
  border-bottom: 1px solid #ccc;
}

.body {
  flex: 1 0 auto;
}

.footer {
  opacity: 0.5;
}

<div class="container" style="height: 150px; margin-bottom: 50px;">
  <div class="title">Fixed height</div>
  <div class="body">
    Content
  </div>
  <div class="footer">Footer</div>
</div>


<div class="container">
  <div class="title">Fluid height</div>
  <div class="body">
    Content
  </div>
  <div class="footer">Footer</div>
</div>

Similar issue with img : Flexbox on IE11: image stretched for no reason?

IE11 flex:1 causes content to overflow when parent has no fixed height

1 Answers1