HTML div growing beyond max-height of parent container

Question

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 1

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.

Answer 2

The page needs to render the information regardless. Assuming that the inner content is larger than the outer, using overflow creates a scroll bar for you.

.main-body {
  overflow-y: scroll;
}

http://www.w3schools.com/cssref/pr_pos_overflow.asp

---

Post edit Updates:

.header {
  position:fixed;
  width: 60%;
}

.content {
  margin-top: 10%; // To match the header's height
}

The styling will be off, but you can adjust it to fit your project better.

Answer 3

JSfiddle: https://jsfiddle.net/nu5LkL6b/9/

As discussed: 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.

Little Enhc:

.content {
  max-height: 90%;
  width: calc(100% - 20px);
  height: calc(90% - 20px);
  background: blue;
  padding: 10px;
  overflow: auto;
}

CSS:

.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%;
  height: 60%;
  padding: 10px;
}
.header {
  height: 10%;
  max-height: 10%;
  background: red;
}
.content {
  max-height: 90%;
  width: calc(100% - 20px);
  height: calc(90% - 20px);
  background: blue;
  padding: 10px;
  overflow: auto;
}
h2 {
  margin-top: 0;
}

Answer 4

Your h2 has "native" margin which is added to the main-body height and breaks the percentage. Remove this margin. Then your main-body has padding that add extra pixels too. Remove it, and 90% + 10% will fit 100% .

 h2 { margin: 0; } .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%; } .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> 

Answer 5

you need to add height to the parent element ie .main-body

 .main-body{
        height:72%;    /* added */
        padding:0px;  /* editied  */
    }
    .header{
      height:20%;   /* edited*/
      max-height:20%; /* edited but actually not needed to have max height */
    }