Диалог с максимальной высотой и динамическим содержимым, которое прокручивается + нижний колонтитул css

Question

У меня есть диалог с позицией: абсолют и максимальная высота набора. Свойство max-height задается извне фреймворком javscript (диалоговое окно jQuery UI), поэтому я не могу его контролировать. Внутри у меня есть 2 элемента: один заполнен динамическим контентом и статическим нижним колонтитулом. Я хочу, чтобы диалог увеличивался с его содержимым до тех пор, пока не будет достигнута максимальная высота, и после этого мой контентный div должен отобразить полосу прокрутки.

HTML выглядит так:

<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>

И CSS, как это:

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

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

Проблема в том, что контент всегда будет выводить окружающий диалог и сдвигать нижний колонтитул.

пример

Если я установил высоту диалогового окна div, то все в порядке.

example2

Я могу рассчитать высоту с помощью javascript и установить ее в своем диалоговом окне ( пример 3), но я бы хотел сделать это, используя только CSS. Это возможно?

Answer 1

В качестве альтернативного подхода вы можете использовать flexbox,

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

jsfiddle