Flexbox 在动态大小的父级中滚动溢出内容

Question

我有一个简单的 menu 和 content div 结构。 menu 没有固定大小，可以根据其内容进行扩展。下面的 content div 应该使用可用的 space 并在溢出时滚动它自己的内容。不幸的是，flexbox 现在的行为方式是 content div，由于其 flex:1 属性，根据其内容展开而不是滚动内容.

有没有一种方法可以使用 flex:1 来保留动态大小并且还具有 content div 滚动的内容？

    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 1

你不见了

.main 上的高度，以根据正文或视口的高度调整大小。
溢出 .content，所以它会溢出，除非你想让 .main 溢出（body 已经溢出）
最后是flex-shrink:0；在 .segment 上，所以它不会缩小 :)

这里有一个我理解你所追求的例子：

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>

Flexbox 在动态大小的父级中滚动溢出内容

Flexbox scroll overflowing content in an dynamic sized parent

html

javascript

css

flexbox