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.
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).
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.
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.
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.
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 !
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With