div: to fill all available space with increasing parent

1. There are "view" and "main" with a height of 100%. "main" will scroll.
2. There are "header" and "footer" of fixed height (but unknown in advance).
3. "content" will scroll and take up all the free space (for example, when increasing the "header", it decreases).
4. However, it can decrease only to a specified height (min-height), after which the "view" block begins to expand.

Drawing layout.

How can this be achieved? Tried through flex. The fact is that at a height of 100% of the view block, when expanding, it begins to climb onto another block because of the hard-set height (i.e., overflow occurs). And you cannot remove the specified height from view, because impossible to implement paragraph 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%;
}