Block with overflow:auto goes out of parent inline-block - html

Question

http://jsfiddle.net/k88bqjnj/7/
I'm trying to make a popup window.
Css:
.c1{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 1003;
text-align: center;
padding-top: 49px;
}
.c2{
display: inline-block;
background: #e9e9e9;
box-shadow: 2px 2px 2px #000;
margin: auto;
padding: 20px;
max-height: 80%;
max-width: 90%;
}
.c3{
overflow: auto;
}
Html:
<div class="c1">
<div class="c2">
<div>header</div>
<div class="c3">
*long text*
</div>
</div>
</div>
The thing is c3 block goes out of c2 when I want it reach the bottom border of c2 and become scrollable.
I need c2 block size to depend on a browser window size and to keep header on top. The best solution yet is setting max-height to c3 block.

Answer 1

Add height in [.c3][1]
Update Link
.c3{
overflow: auto;
height:180px;
}

Answer 2

you need to add
overflow: scroll;
to c2's CSS
fiddle

Answer 3

You need to add your overflow: auto property to your .c2 intead adding it to your siblings .c3 DEMO
.c2{
display: inline-block;
background: #e9e9e9;
box-shadow: 2px 2px 2px #000;
margin: auto;
padding: 20px;
max-height: 200px;
max-width: 90%;
overflow:auto; -->> ADDED
}

Answer 4

"overflow: auto" works if there is constraint (width or height).
In you case, you have applied a overflow on the content (.c3) and not the container (.c2).
Just by moving "overflow: auto" rules to the container (.c2) should make what you expect.
.c2{
display: inline-block;
background: #e9e9e9;
box-shadow: 2px 2px 2px #000;
margin: auto;
padding: 20px;
max-height: 80%;
max-width: 90%;
overflow: auto; /* add me */
}
.c3{
/* overflow: auto; delete me*/
}
Here is the result http://jsfiddle.net/vLrjqzcq/