div: всё доступное пространство с расширением

1. имеются view и main с height 100%. main скроллится.
2. имеются header и footer фиксированной высоты (но неизвестной заранее).
3. content скроллится и занимает всё свободное место (например, при увеличении header, он уменьшается).
4. Однако уменьшаться он может до заданной высоты, после чего начинает расширяться блок view.

Как такое можно получить? Попробовал через flex. Дело в том что при height 100% блока view при расширении он начинает залазить на другой блок из за жёсткого заданного height (т.е происходит overflow). А заданный height у view не уберешь, т.к. невозможно реализовать пункт 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%;
}