尽管溢出属性，内容溢出弹性项目

Question

我有一个非常简单的页面设置，使用弹性框的方式如下：

蓝色 div 应该占高度的 25%，紫色 div 应该占 75%。如果蓝色div 中有太多行，它应该保持相同大小并显示滚动条。这适用于几行，但在某些时候中断，蓝色div 溢出并长成紫色。我是 flexbox 的新手，所以我真的不明白为什么会这样。不使用弹性盒会更好吗？感谢您在这一点上的任何提示或指针。

这是我使用的代码（整页运行）：

function lines(noLines) {
  var text = "line</br>".repeat(noLines);
  document.getElementById("lower").innerHTML = text;
}

* {
  box-sizing: border-box;
}

.body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#static1 {
  height: 30px;
  width: 100%;
  background-color: red;
}

#static2 {
  height: 40px;
  width: 100%;
  background-color: orange;
}

#content {
  display: flex;
  flex: 1;
}

#left {
  width: 40%;
  background-color: yellow;
}

#right {
  width: 60%;
  display: flex;
  flex-direction: column;
}

#upper {
  flex: 3 0;
  background-color: violet;
}

#lower {
  flex: 1;
  background-color: blue;
  overflow: auto;
}

<div class="body">
  <div id="static1">Some static div</div>
  <div id="static2">Another static div. Flexbox below fills rest of remaining screen.</div>
  <div id="content">
    <div id="left">
      Left part, fixed width in percentage.</br>
      Click to enter lines into the bottom right:</br>
      <button onclick=lines(20)>Few Lines</button>
      <button onclick=lines(200)>Many Lines</button>
    </div>
    <div id="right">
      <div id="upper">Flexbox with flex=3.</div>
      <div id="lower">Flexbox with flex=1.</div>
    </div>
  </div>
</div>

Answer 1

要使overflow 属性正常工作，容器需要一个实际高度或最大高度。弹性高度（.content 上有 flex: 1）不会削减它。

为了让overflow有效果，块级容器 必须具有设定的高度（height 或 max-height）或 white-space 设置为 nowrap。 ~MDN

由于您已经知道主容器 (100vh) 和前两行（30px 和 40px）的高度，因此使用 calc() 函数很简单。

function lines(noLines) {
  var text = "line</br>".repeat(noLines);
  document.getElementById("lower").innerHTML = text;
}

.body {
  display: flex;
  flex-direction: column;
  height: 100vh;  /* adjustment */
}

#static1 {
  flex-shrink: 0;  /* disable shrinking */
  height: 30px;
  /* width: 100%; */
  background-color: red;
}

#static2 {
  flex-shrink: 0;  /* disable shrinking */
  height: 40px;
  /* width: 100%; */
  background-color: orange;
}

#content {
  height: calc(100vh - 70px); /* new */
  display: flex;
  /* flex: 1; */ /* may work in some browsers, but not reliable */
}

#left {
  width: 40%;
  background-color: yellow;
}

#right {
  width: 60%;
  display: flex;
  flex-direction: column;
}

#upper {
  flex: 3 0;
  background-color: violet;
}

#lower {
  flex: 1;
  background-color: aqua; /* adjusted for illustration */
  overflow: auto;
}

body {
  margin: 0; /* new; override browser default  */
}

* {
  box-sizing: border-box;
}

<div class="body">
  <div id="static1">Some static div</div>
  <div id="static2">Another static div. Flexbox below fills rest of remaining screen.</div>
  <div id="content">
    <div id="left">
      Left part, fixed width in percentage.<br> Click to enter lines into the bottom right:<br>
      <button onclick=lines(20)>Few Lines</button>
      <button onclick=lines(200)>Many Lines</button>
    </div>
    <div id="right">
      <div id="upper">Flexbox with flex=3.</div>
      <div id="lower">Flexbox with flex=1.</div>
    </div>
  </div>
</div>

jsFiddle demo

Answer 2

将 CSS 的顶部更改为：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Answer 3

我希望这就是你的意思，但如果我错了，请道歉。我可以看到的问题在于您使用flex: 1 和flex: 3 定义右列的比例的方式，没有指定其父容器的高度，即#right 没有高度，所以框可以内容越多越丰富。

请试试这个，我希望它有效，如果我能回答任何其他问题，请询问。

我唯一改变的是你的 CSS 并将 max-height: calc(100vh - 70px); 添加到 #right div。并将overflow: auto;改为overflow-y: scroll;

* {
  box-sizing: border-box;
}

.body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  
}

#static1 {
  height: 30px;
  width: 100%;
  background-color: red;
}

#static2 {
  height: 40px;
  width: 100%;
  background-color: orange;
}

#content {
  display: flex;
  flex: 1;
}

#left {
  width: 40%;
  background-color: yellow;
}

#right {
  width: 60%;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 70px);
}

#upper {
  flex: 3;
  height: 75%;
  background-color: violet;
}

#lower {
  flex: 1;
  height: 25%;
  background-color: blue;
  overflow-y: scroll;
}