Prevent flex PARENT from growing without overflow: hidden

Question

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/

Answer 1

I know it is an old question, but anyway would be useful for others.

Since you don't want to apply some padding to outer container or margin to the shadowed element, you can simply give z-index (greater than any outer elements z-index (if set of course)) property to the shadowed element and it will override cutoffs.

Answer 2

If you gave the "veryBigElement" height 500px and you want main content will not be scrolling only inner elements could be scrolled. So you have to add MAX-HEIGHT of veryBigElement parent. If you remove the overflow-y: hidden than splitView-section will not grow.

Answer 3

You can remove "overflow-y: hidden" and add "height: 100%" to .splitView and -section.

.splitView{
    display: flex
    flex: 1 1 auto
    background: rgba(#008080, 0.2)
    height: 100%
    &-section{  
        display: flex
        flex-direction: column
        flex: 1 1 50%
        height: 100%
    }
}

Since the height of the parent div is set, the children divs will inherit that height.

https://codepen.io/salixdubois/pen/JQLaRE