div: заполнить все доступное пространство увеличивающимся родительским элементом

Question

1. Существуют «вид» и «основной» с высотой 100%. «main» будет прокручиваться.
2. Есть «header» и «footer» фиксированной высоты (но заранее неизвестно).
3. «контент» будет прокручиваться и занять все свободное место (например, при увеличении «заголовка» оно уменьшается).
4. Однако он может уменьшаться только до указанной высоты (min-height), после чего блок "вид" начинает расширяться.

Макет чертежа.

Как этого добиться? Пробовал через флекс. Дело в том, что на высоте 100% блока просмотра при расширении он начинает перелезть на другой блок из-за жестко заданной высоты (т.е. происходит переполнение). И убрать указанную высоту из вида нельзя, т.к. невозможно реализовать пункт 3.

<div class="main">
    <div class="view">
        <div class="header"></div>
         <div class="content"></div>
          <div class="footer"></div>
    </div>
    <div class="view">
        <div class="header"></div>
         <div class="content"></div>
          <div class="footer"></div>
    </div>
</div>

.main {
    height: 100%;
    overflow: auto;
}

.view {
    height: 100%;
}

.header, .footer {
    height: 30px;
}

.content {
    overflow: auto;
//    height: all remaining space until min-height
    min-height: 50%;
}