CSS - Container height same height as parent div unless parent div is smaller than container div

Question

I currently get the parents div height with: height: inherit;, but when I scale the window down then the parent div is smaller than the container div so overflow: hidden; hides half of the container content.

Is it possible to just do this with css?

This is the code:

<div id="container">
<div class="content">
    <div class="wrapper">
        Content here
    </div>
</div>

#container {
    float: left;
    height: 400px;
    width: 400px;
    background-color: red;
}
.content {
    float: left;
    height: inherit;
    width: 90%;
    overflow: hidden;
    position: relative;
    background-color: black;
}

.wrapper {
    width: 90%;
    height: 900px;
    position: relative;
    z-index: 99;
    background-color: blue;
}

http://jsfiddle.net/orymyjto/1/

Answer 1

You probably use the overflow property to clear the floats, right?

Then change overflow: hidden to overflow: auto .

Answer 2

Set the content div min-height: 400px; (replacing height) So it will never be smaller than the container but can get larger as necessary.