Div size overlays related to parent size

Question

I have an overlay problem.

My code is here: jsfiddle

The main problem is line 59CSS, which I think.

max-height:auto;

If so, the content simply flows over the overlay. If I set heightfor a specific type like

max-heigt:250px;

everything is fine, and the overlay saves the size and a scroll bar appears. Even setting it to 100% does not help.

How to set the size relative to the parent div? It widthworks great with, but not for height. I tried with several classes and answers that I found here, but I need to fix the size or streams of content on top of the overlay. I want to use relative size so that it works with most permissions on the desktop and does not fix the size. Any solutions that will work?

Answer 1

You probably don't want to, but if you specify a specific heighton both elements, it seems to work fine. I suggest you just rename max-heightto height:

CSS

.overlay {
    ...
    height: 80%;
    ...
}

#OverlayContent {
    ...
    height: calc(100% - 20px); /* subtract padding or use box-sizing */
    ...
}

See jsFiddle

Answer 2

overflow-y: scroll; .overlay