How to extend a flex item beyond an overflow-scroll container?

Issue

I have a component that can be simplified to this:

* {
  margin: 0;
}

.container {
  height: 400px;
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%
}

.top {
  height: 48px;
  background-color: blue;
}

.bottom {
  flex: 1;
  display: flex;
  overflow-y: scroll;
}

.main {
  display: flex;
  flex: 1;
  background: green;
  position: relative;
  align-items: stretch;
}

.sidebar {
  width: 100px;
  background-color: yellow;
  border: 1px solid orange;
  min-height: 100%;
}

.sidebar-item {
  height: 300px;
  border: 1px solid purple;
}

.flex-item {
  flex: 1;
  border: 1px solid red;
}

<div class="container">
  <div class="content">
    <div class="top"></div>
    <div class="bottom">
      <div class="sidebar">
        <div class="sidebar-item"></div>
        <div class="sidebar-item"></div>
        <div class="sidebar-item"></div>
      </div>
      <div class="main">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
      </div>
    </div>
  </div>
</div>

The issue is that the sidebar gets truncated and the flex items take the height of the overflow element instead of stretching beyond it.

How can this be fixed?

I tried using align-items: stretch but it did not change anything. I also tried setting heights to different elements but it did not work.

Solution

You could change the .bottom to grid layout, and assign grid-auto-rows: min-content. This way the content height of the container is determined by its content, but not the container itself:

.bottom {
  flex: 1;
  overflow-y: scroll;

  /* using grid layout */
  display: grid;

  /* to mimic horizontal flex layout */
  grid-auto-flow: column;

  /* column reserved for sidebar, with the width matches sidebar's width */
  grid-template-columns: auto;

  /* all other columns other than sidebar should take available space and devided equally (for .main element) */
  grid-auto-columns: 1fr;

  /* the content height is determined by its tallest child, which is sidebar in this case */
  grid-auto-rows: min-content;
}

* {
  margin: 0;
}

.container {
  height: 400px;
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%
}

.top {
  height: 48px;
  background-color: blue;
}

.bottom {
  flex: 1;
  display: grid;
  overflow-y: scroll;
  grid-auto-flow: column;
  grid-template-columns: auto;
  grid-auto-rows: min-content;
  grid-auto-columns: 1fr;
}

.main {
  display: flex;
  flex: 1;
  background: green;
  position: relative;
  align-items: stretch;
}

.sidebar {
  width: 100px;
  background-color: yellow;
  border: 1px solid orange;
  min-height: 100%;
}

.sidebar-item {
  height: 300px;
  border: 1px solid purple;
}

.flex-item {
  flex: 1;
  border: 1px solid red;
}

<div class="container">
  <div class="content">
    <div class="top"></div>
    <div class="bottom">
      <div class="sidebar">
        <div class="sidebar-item"></div>
        <div class="sidebar-item"></div>
        <div class="sidebar-item"></div>
      </div>
      <div class="main">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
      </div>
    </div>
  </div>
</div>

Answered By - Hao Wu