Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 976
Wojciech Maj Avatar asked Jan 05 '16 12:01

Wojciech Maj


People also ask

How do you make Flexbox children 100% Height of their parents using CSS?

Getting the child of a flex-item to fill height 100%Set position: absolute; on the child. You can then set width/height as required (100% in my sample).

Can you set height of Flexbox?

It can be changed by using the flex-direction property. To use flexbox, we have to set display: flex or inline-flex to flex-container. By default, the height and width of a flex-container are set to auto. But we can define a fixed amount to them.

How does Flexbox manage overflow?

To prevent horizontal overflow, you can: Use flex-basis: 0 and then let them grow with a positive flex-grow . Use a positive flex-shrink to let them shrink if there isn't enough space.

Do children inherit display flex?

This means that a flex container is always the parent and a flex item is always the child. Flex properties work only within this relationship. Descendants of a flex container beyond the children are not part of flex layout and will not accept flex properties.


1 Answers

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 !

like image 198
Nomak22 Avatar answered Sep 21 '22 09:09

Nomak22