Flexbox在動態大小的父級中滾動溢位內容

我有一個簡單的menudivcontent結構。menu沒有固定大小，可以根據內容擴展。下面的contentdiv 應該占用可用空間并在溢位時滾動自己的內容。不幸的是，flexbox現在的行為方式是content，由于其flex:1屬性，div 會根據其內容進行擴展，而不是滾動內容。

有沒有辦法使用 div 滾動來保留動態大小flex:1并且還擁有contentdiv 滾動的內容？

    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>

uj5u.com熱心網友回復：

你不見了

1. .main根據主體或視口的高度設定高度。

2. overflow on .content，所以它會溢位，除非你想.main溢位（哪個body已經溢位了）

3. 最后是 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>

標籤：javascript html css 弹性盒

上一篇：從2input中決定最小的偶數，如果輸入的數不是偶數，則更正它。任何解決方案（Javascript/html）？

下一篇：使一些文本和影像以正確的大小對齊