Prevent flex PARENT from growing without overflow: hidden

Too much information how to prevent flex child from growing, but too difficult to find out how to prevent flex PARENT from growing (because of the child).

Consider below layout:

• The outer element's height and width are fixed (possible for native applications)
• Header and footer are not growing and not shrink. Also, footer is always at the bottom.
• Main content (between header and footer) takes all available space.
• Main content has NOT scrolling.
  • But the inner elements could be scrolled. E. g. the scroll view below section title:

Initial solution:

.layout {
  display: flex;
  flex-direction: column;
  width: 640px;
  height: 300px;
  background: rgba(220, 20, 60, 0.2);
}

.header {
  flex: 0 0 auto;
  padding: 4px 8px;
  background: rgba(220, 20, 60, 0.2);
}

.content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 4px 8px;
  background: rgba(255, 69, 0, 0.2);
  overflow-y: hidden;
}

.title {
  flex: 0 0 auto;
  background: rgba(255, 255, 0, 0.2);
}

.splitView {
  display: flex;
  flex: 1 1 auto;
  background: rgba(0, 128, 128, 0.2);
  overflow-y: hidden;
}

.splitView-section {
  display: flex;
  flex-direction: column;
  flex: 1 1 50%;
}

.splitView-section:first-child {
  background: rgba(0, 191, 255, 0.2);
}

.splitView-section:last-child {
  background: rgba(0, 0, 255, 0.2);
}

.scrollView {
  flex: 1 1 auto;
  background: rgba(165, 42, 42, 0.2);
  overflow-y: auto;
}

.veryBigElement {
  background: #CD5C5C;
  width: 50px;
  height: 500px;
  box-shadow: rgba(0, 0, 0, 0.25) 0 0 6px
}

.footer {
  flex: 0 0 auto;
  padding: 4px 8px;
  background: rgba(173, 255, 47, 0.2);
}

<div class="layout">
  <div class="header">I am header</div>
  <div class="content">
    <div class="title">Title</div>
    <div class="splitView">
      <div class="splitView-section">
        <div class="sectionTitle">Section title</div>
        <div class="scrollView">
          <div class="veryBigElement"></div>
        </div>
      </div>
      <div class="splitView-section"></div>
    </div>
  </div>
  <div class="footer">I am footer</div>
</div>

• The outer element's height and width are fixed: let it will be width: 640px and height: 300px; for instance.
• Header and footer are not grow and not shrink. flex: 0 0 auto for header and footer.
• Main content (between header and footer) takes all available space. flex: 1 1 auto.
• Also footer is always in the bottom. Footer does not need margin-top: auto because it is being pressed to bottom by main content.
• Main content has NOT scrolling. It will not by default.
• But the inner elements could be scrolled. overflow-y: auto for scroll view.

It works. But there is one problem: if we add some elements with shadows (e. g. cards to scroll view), because of overflow-y: hidden for .splitView and .content, we will not see the part of it. E. g. if to add box-shadow: rgba(black, 0.25) 0 0 6px for .veryBigElement, we see just:

So, in dependence to design, above solution may not be used. If we remove overflow-y: hidden from .splitView and .content, splitView-section will grow regardless to overflow-y: auto for .scrollView.

Please not that:

• We don't know neither header's height nor footers's height (suppose it's contents is dynamic).
• We can not compute .scrollView's height, even splitView's height: it could be a lot of contents instead of '.title' in real application.

JSFiddle: https://jsfiddle.net/teyqkrh8/