html - 如何删除使用 flexbox 的父元素的垂直溢出

Question

我正在努力使用一种样式元素，该元素包装包含元素列表的元素。
html结构

<div id="root">
<div class="app"> <!-- Causes overflow - unexpected -->
  <nav class="appTopbar"></nav>
  <main class="page">
    <nav class="pageTopbar"></nav>
    <div class="container">
      <div class="left">
        <nav class="pageTopbar"></nav>
        <div class="list"> <!-- Causes overflow - expected -->
          <div class="item">Item 1</div>
          ...
        </div>
      </div>
      <div class="right"></div>
    </div>
  </main>
</div>
</div>

.list时出现问题积累了很多元素。 .app , .page , .container , .left元素使用 flexbox 和 blox 轴方向。

display: flex;
flex-direction: column;

以及所有除了 .left套装 height: 100%或 height: inherit一种(可怕的)解决方法是附加 .page与 overflow: hidden;放手吧，但也许有更好的方法。
谢谢你不厌其烦地帮助我。
这是导致溢出的示例 html 代码。

const list = document.querySelector(".list");

                         
let index = 0;

for(let it of new Array(100)) {
  const node = document.createElement("div");         
  const textnode = document.createTextNode(`Element ${index}`); 
  node.appendChild(textnode);
  list.appendChild(node); 
  
  index++;
}

html, body {
  height: 100%;
  margin: 0;
}

#root {
  height: inherit;
}

* {
    box-sizing: border-box;
}

.app {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  height: inherit;
}

.appTopbar {
  display: flex;
  align-items: center;
  flex: 0 0 50px;
  
  background: #00308F;
}

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

.container {
  flex: 1 1;
  display: flex;
  height: 100%;
}

.left {
  display: flex;
  flex-direction: column;
  flex: 0 1 100px;
  
  background: #7FFFD4;
}

.right {
  flex: 1 1;  
  background: #0066b2;
}

.list {
  padding: 10px;
  overflow-y: auto;
  flex: 1 1;
}

<div id="root">
  <div class="app">
    <nav class="appTopbar"></nav>
    <main class="page">
      <nav class="pageTopbar"></nav>
      <div class="container">
        <div class="left">
          <nav class="pageTopbar"></nav>
          <div class="list"></div>
        </div>
        <div class="right"></div>
      </div>
    </main>
  </div>
</div>

Answer 1

如果我理解正确，您需要删除右侧的滚动条。在这种情况下，更改类中的高度 .page 来自 height:100%至 height: calc(100% - 50px)哪里 50px 是你的高度 .appTopbar 类(class)。

.page {
  display: flex;
  flex-direction: column;
  height: calc(100% - 50px); /* changed */
}

const list = document.querySelector('.list');

let index = 0;

for (let it of new Array(100)) {
  const node = document.createElement('div');
  const textnode = document.createTextNode(`Element ${index}`);
  node.appendChild(textnode);
  list.appendChild(node);

  index++;
}

html,
body {
  height: 100%;
  margin: 0;
}

#root {
  height: inherit;
}

* {
  box-sizing: border-box;
}

.app {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  height: inherit;
}

.appTopbar {
  display: flex;
  align-items: center;
  flex: 0 0 50px;
  background: #00308f;
}

.page {
  display: flex;
  flex-direction: column;
  height: calc(100% - 50px);
}

.container {
  flex: 1 1;
  display: flex;
  height: 100%;
}

.left {
  display: flex;
  flex-direction: column;
  flex: 0 1 100px;
  background: #7fffd4;
}

.right {
  flex: 1 1;
  background: #0066b2;
}

.list {
  padding: 10px;
  overflow-y: auto;
  flex: 1 1;
}

<div id="root">
  <div class="app">
    <nav class="appTopbar"></nav>
    <main class="page">
      <nav class="pageTopbar"></nav>
      <div class="container">
        <div class="left">
          <nav class="pageTopbar"></nav>
          <div class="list"></div>
        </div>
        <div class="right"></div>
      </div>
    </main>
  </div>
</div>