Flexbox scroll overflowing content in an dynamic sized parent

I have a simple menu and content div structure. The menu has no fixed size and can expand depending on its content. The content div underneath should take the available space and scroll its own content if overflowing. Unfortunately, flexbox now behaves in such a way that the content div, due to its flex:1 property, expands according to its content instead of scrolling the content.

Is there a way to preserve the dynamic sizes using flex:1 and also have the content of the content div scroll?

    function toggleMenu() {
      const menu = document.querySelector(".menu");
      if(menu.classList.contains("open")) {
        menu.querySelector(".text").innerHTML = "<p> small text </p>";
        menu.classList.remove("open");
      }else {
        menu.querySelector(".text").innerHTML = "<h1> im the menu </h1>";
        menu.classList.add("open");
      }
    }

    body {
      padding: 0;
      margin: 0;
      background-color: #17141d;
      display: flex;
      height: 100vh;
    }

    .main {
      display: flex;
      flex-direction: column;
      flex: 1;
      background-color: grey;
    }

    .menu {
      background-color: blueviolet;
    }

    .content {
      display: flex;
      flex: 1;
      background-color: aqua;
    }

    .segment-wrapper {
      flex: 1;
      display: flex;
      background-color: red;
      flex-direction: column;
      overflow-y: scroll;
      padding: 10px;
      box-sizing: border-box;
    }

    .segment {
      height: 500px;
      background-color: green;
      border-radius: 5px;
      border: solid 1px black;
      width: 100%;
      margin-bottom: 10px;
    }

  <div class="main">
    <div class="menu open">
      <div class="text"><h1>im the menu</h1></div>
      <button onclick="toggleMenu()">Toggle</button>
    </div>
    <div class="content">
      <div class="segment-wrapper">
        <div class="segment">

        </div>
        <div class="segment">

        </div>
        <div class="segment">

        </div>
      </div>
    </div>
  </div>

Answer

you are missing

1. an height on .main to size it according to body or the viewport’s height.

2. overflow on .content, so it overflows, unless you want .main to overflow (which body does already)

3. and finally flex-shrink:0; on .segment so it doesn’t shrink 🙂

here an example of what i understood you were after:

function toggleMenu() {
      const menu = document.querySelector(".menu");
      if(menu.classList.contains("open")) {
        menu.querySelector(".text").innerHTML = "<p> small text </p>";
        menu.classList.remove("open");
      }else {
        menu.querySelector(".text").innerHTML = "<h1> im the menu </h1>";
        menu.classList.add("open");
      }
    }

body {
      padding: 0;
      margin: 0;
      background-color: #17141d;
      display: flex;
      height: 100vh;
    }

    .main {
      display: flex;
      flex-direction: column;
      flex: 1;
      background-color: grey;
      max-height;100%;
    }

    .menu {
      background-color: blueviolet;
    }

    .content {
      display: flex;
      flex: 1;
      background-color: aqua;
      overflow:auto;
    }

    .segment-wrapper {
      flex: 1;
      display: flex;
      background-color: red;
      flex-direction: column;
      overflow-y: scroll;
      padding: 10px;
      box-sizing: border-box;
    }

    .segment {
    flex-shrink:0;
      height: 500px;
      background-color: green;
      border-radius: 5px;
      border: solid 1px black;
      width: 100%;
      margin-bottom: 10px;
    }

<div class="main">
    <div class="menu open">
      <div class="text"><h1>im the menu</h1></div>
      <button onclick="toggleMenu()">Toggle</button>
    </div>
    <div class="content">
      <div class="segment-wrapper">
        <div class="segment">

        </div>
        <div class="segment">

        </div>
        <div class="segment">

        </div>
      </div>
    </div>
  </div>