B Days B Days - 2 months ago 9
CSS Question

HTML div growing beyond max-height of parent container

I know there are tons of questions asking the same thing but none of the solutions I came across works for the scenario that I set up.

I have a simple structure that has one main outer div, and a inner div. Within the inner div I separated into two of 10% and 90% height respectively. The second separation seems to grow beyond the restrictions set by max-height and I can't seem to figure out why.

EDIT
I need for the scroll bar to be present in the second separation (.content) and not on the inner div (.main-body)



.outer-layer {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
z-index: 15000;
top: 0;
left: 0;
padding: 10px;
}
.main-body {
position: fixed;
top: 18%;
left: 18%;
background: #fff;
width: 60%;
min-height: 30%;
max-height: 60%;
padding: 10px;
}
.header {
height: 10%;
max-height: 10%;
background: red;
}
.content {
max-height: 90%;
width: calc(100% - 20px);
height: 90%;
background: blue;
padding: 10px;
overflow: auto;
}

<div class="outer-layer">
<div class="main-body">
<div class="header">
<h2>Hello</h2>
<!--header-->
</div>
<div class="content">
<p>dynamic content</p>
<p>dynamic content</p>
<p>dynamic content</p>
<p>dynamic content</p>
<p>dynamic content</p>
<p>dynamic content</p>
<!--content-->
</div>
<!--body-->
</div>
<!--overlay-->
</div>





I am currently testing in Chrome

I included this Fiddle

Answer

Is this JSFiddle what you're aiming for?

You had a few slight hiccups in your original version that I've tidied up and outlined below...

1. You cannot use a percentage-based height on an element whose parent does not have a set height. Because you are not giving .main-body a set height, its children will not respect percentage-based heights. This is resolved by giving .main-body a height.

2. Your <h2> has large vertical margins, and so its height is expanding past the height of its parent. Remove these by doing h2 {margin: 0;}.

3. Remember that padding is additive! 10px padding on both the top and bottom of an element will add 20px to its height. You can use box-sizing: border-box; on your elements to avoid this - it forces the element to apply their padding inwards instead of outwards, thereby not messing with it's height/width.