Flexbox children overflow parent with max-height specified on IE

Question

I have a parent element that contains two children elements that are displayed on top of each other using flexbox. This parent element has max-height property set to a certain value. So, as long as the content is short, the parent element is supposed to stay small, and as the content grows, the parent element grows with it until it meets its max-height. At this point we should see scrollbars on the content element.

#container {
  display: flex;
  max-width: 80vw;
  max-height: 100px;
  flex-direction: column;
}

#content {
  overflow-y: auto;
}

/* styling - ignore */
#container {
  border: 2px solid black;
  margin-bottom: 1em;
}
#header {
  background-color: rgb(245, 245, 245);
  padding: 10px;
}
#content {
  background-color: rgb(255, 255, 255);
  padding: 0 10px;
}

<div id="container">
  <div id="header">Header</div>
  <div id="content">
    <p>Everything works as supposed to, move along</p>
  </div>
</div>

<div id="container">
  <div id="header">Header</div>
  <div id="content">
    <p>Very long content</p>
    <p>Very long content</p>
    <p>Very long content</p>
    <p>Very long content</p>
  </div>
</div>

This works perfectly on Firefox and Chrome. On Internet Explorer though the scrollbars in the content element are not displayed; instead, the content element overflows from the parent element.

I've tried to play around with flex-basis and other flexbox attributes, googled a lot, but without any luck.

You haven't mentioned which version of IE but support there is...erm... *not top-notch*. See [**CanIUse.com**](http://caniuse.com/#feat=flexbox) — Paulie_D, Jan 05 '16 at 13:06
Well, flexbox was implemented in IE10, and in this case IE11 behaves the very same way IE10 does. — Wojciech Maj, Jan 05 '16 at 13:09
Implemented but still buggy...see the issues listed at the given link. — Paulie_D, Jan 05 '16 at 13:10
Apparent duplicate (unsolved for IE) - http://stackoverflow.com/questions/22914399/flexbox-misbehaving-with-max-height — Paulie_D, Jan 05 '16 at 13:14
Have you ever found a solution? I'm having the same problem. — Rick Doesburg, Jul 19 '17 at 10:26

score 1 · Answer 1 · answered Apr 11 '18 at 07:51

I tried to solve this many times, but none of the css solution seems to work in IE 11. Especialy if you want to keep variable height until max height is reached and then display scrollbar. (you simply have to set fixed height(not in %) to make scrollbar work in IE)

So I used javascript function that I launched only for IE

You can find out how detect browser here.

Vanilla:

const cont = document.getElementById('container');

if (cont && cont.cildren){
  const child = cont.children;
  const maxH = cont.offsetHeight - child[0].offsetHeight;

  if (maxH < child[1].offsetHeight){
    child[1].style.height = maxH + 'px';
  }
}

or jQuery (if you are still using it):

const cont = $('#container');
const header = cont.find('.header');
const scrollCont = cont.find('.scrollContainer');
const maxH = cont.outerHeight() - header.outerHeight();

if (maxH < scrollCont.outerHeight()){
  scrollCont.height(maxH);
}

In most cases I do what I can to avoid javascript in similar cases ... but, damn you IE !

score 0 · Answer 2 · answered Jul 25 '17 at 17:48

try height: 100px instead of max-height: 100px; on #container, ie:

#container {
  display: flex;
  max-width: 80vw;
  height: 100px;
  flex-direction: column;
}

#container {
  display: flex;
  max-width: 80vw;
  height: 100px;
  flex-direction: column;
}

#content {
  overflow-y: auto;
}

/* styling - ignore */
#container {
  border: 2px solid black;
  margin-bottom: 1em;
}
#header {
  background-color: rgb(245, 245, 245);
  padding: 10px;
}
#content {
  background-color: rgb(255, 255, 255);
  padding: 0 10px;
}

<div id="container">
  <div id="header">Header</div>
  <div id="content">
    <p>Everything works as supposed to, move along</p>
  </div>
</div>

<div id="container">
  <div id="header">Header</div>
  <div id="content">
    <p>Very long content</p>
    <p>Very long content</p>
    <p>Very long content</p>
    <p>Very long content</p>
  </div>
</div>

Flexbox children overflow parent with max-height specified on IE

2 Answers2

Linked