CODEWITHSUNDEEP
cssinternet-explorerflexbox
Wojciech Maj
Wojciech Maj

Reputation: 1102

Flexbox children overflow parent with max-height specified on IE

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.

Upvotes: 7

Views: 3112

Answers (2)

Nomak22
Nomak22

Reputation: 123

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 !

Upvotes: 1

Afrophysics
Afrophysics

Reputation: 599

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>

Upvotes: 0

Related Questions