CSS percentage height has no effect

Question

I have some heading and content HTML wrapped in a container like this:

<div class='panel'>
    <div class='panel-heading'>
        Heading
    </div>
    <div class='panel-body'>
        Content
    </div>
</div>

I explicitly set the height of the parent element, .panel, and the child element,.panel-body:

.panel {
    height: 100%;
    width: 50%;
}
.panel-body {
    height: 10%;
    overflow-y: scroll;
}

But the child .panel-body height seems to ignore the CSS height rule, because it just grows arbitrarily with its content! You can see the behavior at this fiddle. Why does this happen?

It's important for me to have percent-calculated height and scrollable overflow on the .panel-body. Is this possible?

(For reference, this is the behavior I'm looking for, but with height calculated by em instead of %.)

Answer 1

You could do this:

1. • Add a container
2. • Give it height 100%
3. • Add min-height to the panel container
     

HTML

<div class="container">
<div class='panel'>
    <div class='panel-heading'>
        Heading
    </div>
    <div class='panel-body'>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
        Body<br></br>
    </div>
</div>
</div>

CSS

html,body{height:100%;}

.container {
    height:100%;
}

.panel{
    width:50%;
    height:100%;
    min-height:100%;   
}

.panel-body {
    height: 20%;
    overflow-y: scroll;
}

* {
    /* for box visibility */
    border: 1px dashed grey !important;
    background-color: #ccc;
    padding: 5px !important;
}

DEMO http://jsfiddle.net/RWPQD/11/

Ps. I set the height of .panel-body at 20%, but you can change it accordingly.