I have this design for a website where I have a header and a footer which are always fixed to the top and bottom of the page then a center flexbox which has an expanding right pane. Sometimes the right hand panel is gone, sometimes its there. This all works.

What doesnt work is that the right hand panel which disappears wont conform to the height of the parent:

https://codepen.io/bogomip/pen/rNvaxWL

<div id="data-outlet" >
  <div >
    <div >Trade</div>
    <div >Trade</div>
    ...
  </div>
</div>

This code should fit the content when there isnt much, but provide a scroll bar when it exceeds the height of the parent flexbox.

So instead of providing a scroll on the yaxis, it just expands the whole page meaning the footer becomes invisible (because overflow is hidden for the main page, the only scroll bars present ever should be in the right hand column, the 'Trade' panel on the codepen, only when there is more than the height of the middle section.

Thanks, Bogo

CodePudding user response：

The overflow-y should be placed in data-outlet instead of data-outlet__outlet because data-outlet is the direct child of the parent flexbox. Then, the data-outlet must have a height, so it knows the minimum height before displaying scrollbar for overflowed content.

.data-outlet {
  /* ... */

  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  
  /* ... */
  &__outlet {
    position: relative;
    box-shadow: .3rem 0 .6rem rgba(var(--colour-primary-light), .7);
    padding: 1rem 2rem;
    border-radius: 1rem;
    background-image: linear-gradient(to bottom right, var(--colour-secondary), var(--colour-primary));
  }
}

Then, to ensure the header and footer visible, you can clamp the data container, so it will stay within that height boundary.

.data {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  height: clamp(500px, 80vh, 800px);
}

In this example, we allow the data container to grow 80vh, but will never exceed 800px. When the height of viewport is reduced, it will shrink the height, but clip it to a minimum height of 500px. Feel free to adjust the values according to your needs.

Finally, let's add some height to the items of trade panel for testing purpose.

.trade-log {
  height: 30px;
}