如何消除垂直溢出的父元素，其中使用flexbox

我正在努力与一个样式元素，其中包装元素，包含项目列表。

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元素使用带有blox轴方向的flexbox。

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>

###如果我是正确的理解，你需要删除右侧滚动条。在这种情况下，改变类。page的高度height:100% to height: calc(100% - 50px) where 50px is your height of the .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>

###删除滚动条的主体，就像overflow:hidden; to id=root that is
来id=root tha这是< br / >

#root {height: inherit;overflow: hidden;}

结果如下面的代码片段所示

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;
  overflow: hidden;
}
* {
  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>