min-height not working as expected

Question

Given the following structure, I need level2 have a min-height without changing the structure. Further, I am not able to move the overflow: hidden to a different class (the example is simplified, it would affect a lot of other things). It works with px , but not with % . All other css properties can be changed.

I am aware of vh, which works exactly like it should. But I would love a solution with CSS2.

Fiddle

HTML:

<div id="level1">
    <div id="level2">
        <div id="heighter"></div>
    </div>
</div>

• body and html: height 100%
• level 1: min-height 100%, overflow hidden
• level 2: min-height 100%
• heighter: height 200px

Edit: More informations about the overflow:hidden

I am using this for a offcanvas navigation. This is a place where I can't use max-width (right?). If I replace the overflow with the max-width, the layout gets recalculated and after that I am able to scroll the level2 on the x-axis (left and right). Same problem as here (click on Push-Menu-Left and then you are able to scroll the x-axis). What I am trying right now is preventing the x-axis scrolling and being able to use the min-height: 100% corretly.

Answer 1

In order to calculate min-height , div#level2 needs to refer to the height definition of its parent. In your code, div#level1 does not have a specified height . You an specify one like so:

#level1 {
    height:100%;
    overflow: hidden; /* This has to be here */
    background-color: red;
}

WORKING EXAMPLE

EDIT:

Explicitly setting height on div#level1 (rather than setting min-height ), you no longer need the overflow:hidden definition. Removing that allows the page to scroll when div#heighter expands beyond the browser's height.

(You mentioned that you need the overflow:hidden for other reasons. If possible, please edit your question to describe those reasons a bit more.)

#level1 {
    height:100%;
    background-color: red;
}

#level2 {
    min-height: 100%;
    background-color: lightseagreen;
}

#heighter {
    height: 2000px;
    width: 100px;
    background-color: white;
    border: 5px dashed black;
}

WORKING EXAMPLE

Answer 2

http://jsfiddle.net/b8uj75e5/3/

#level2 {
    min-height: 1000px; /* Working */
    min-height: 100%; /* Not working */
    background-color: lightseagreen;
    display: block;
    position: absolute;
    width: 100%;
}

IT LIVES.

I just messed around until it worked.