Dialog with max height and dynamic Content that sc

问题:

I have a dialog with position: absolute and a max-height set. The max-height property is set from outside by a javscript framework (jQuery UI Dialog), so I don't have any control over it. Inside I have 2 divs: one that is filled with dynamic content and a static footer. I want the dialog to grow with it's content until max-height is reached and after that my content div should display a scrollbar.

The html looks like this:

<div class="dialog">
    <div class="content">
        This text doesn't mean much it's just supposed to fill content.<br>
        This text doesn't mean much it's just supposed to fill content.
        ...
    </div>
    <div class="copyright">
        © copyright 2015 by some chilled dude
    </div>
</div>

And the css like this:

.dialog {
    position: absolute;
    left: 100px;
    top: 100px;
    max-height: 300px;
    border: solid black 1px;
}

.content {
    height: auto;
    overflow: auto;
    max-height: calc(100% - 20px);
}

The problem is, the content will always blowout its surrounding dialog and push down the footer.

example

If I set the the height of the dialog div everything is fine.

example2

I can calculate the height with javascript and set it on my dialog (example3), but I would like to do this using only css. Is that possible ?

回答1:

As an alternative approach, you could use flexbox.

.dialog {
    position: absolute;
    left: 100px;
    top: 100px;
    max-height: 300px;
    border: solid black 1px;
    display: flex;
    flex-flow: column;
}
.content {
    overflow: auto;
}

jsfiddle