Make a div scrollable inside flexbox

Issue

I have a sidebar that contains 2 panes. When I resize the window vertically, I want the top pane to dynamically resize, and the bottom pane to remain to a fixed size. When the total height of the sidebar is smaller than both panes, I want the top pane to shrink smaller than it's content, and become scrollable.

The expected behavior is the same as VS Code's sidebar.

Currently, when resizing, the top pane "pushes" the bottom pane down.

document.addEventListener("DOMContentLoaded", () => {
  const listItem = document.querySelector(".top-panel .list-item");
  for (let i = 0; i < 25; i++) {
    listItem.parentNode.appendChild(listItem.cloneNode(true));
  }
});

html,
body {
  margin: 0;
}

.main {
  margin-left: 12rem;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 12rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid #454545;
}

.top-panel {
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
}

.bottom-panel {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #ababbc;
  font-weight: 700;
}

.panel-top .list {
  flex-shrink: 1;
  overflow-y: auto;
}

.panel-bottom .list {
  flex-shrink: 0;
}

.list-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<aside class="sidebar">
  <div class="top-panel">
    <div class="header">Top panel</div>
    <div class="list">
      <div class="list-item"><span>https://example.com/users/helloworld</span></div>
      <!-- copied 25 times in the JS -->
    </div>
  </div>
  <div class="bottom-panel">
    <div class="header">Bottom panel</div>
    <div class="list">
      <div class="list-item"><span>Lorem</span></div>
      <div class="list-item"><span>Ipsum</span></div>
    </div>
  </div>
</aside>
<main class="main">Main content</main>

Use "Full page" in snippet to see resizing behavior.

Solution

You can add overflow-y: auto to the top panel, to only show the scrollbar when necessary.

You can also add a fixed size to the bottom panel by adding height: 100px for example. The top panel will automatically shrink to fit the remaining space.

document.addEventListener("DOMContentLoaded", () => {
  const listItem = document.querySelector(".top-panel .list-item");
  for (let i = 0; i < 25; i++) {
    listItem.parentNode.appendChild(listItem.cloneNode(true));
  }
});

html,
body {
  margin: 0;
}

.main {
  margin-left: 12rem;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 12rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid #454545;
}

.top-panel {
  overflow-y: auto;
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
}

.bottom-panel {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #ababbc;
  font-weight: 700;
}

.panel-top .list {
  flex-shrink: 1;
  overflow-y: auto;
}

.panel-bottom .list {
  flex-shrink: 0;
}

.list-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<aside class="sidebar">
  <div class="top-panel">
    <div class="header">Top panel</div>
    <div class="list">
      <div class="list-item"><span>https://example.com/users/helloworld</span></div>
      <!-- copied 25 times in the JS -->
    </div>
  </div>
  <div class="bottom-panel">
    <div class="header">Bottom panel</div>
    <div class="list">
      <div class="list-item"><span>Lorem</span></div>
      <div class="list-item"><span>Ipsum</span></div>
    </div>
  </div>
</aside>
<main class="main">Main content</main>

Answered By - Cuong Vu