尽管具有溢出属性，但内容溢出的弹性项目

Question

我可以使用flexbox通过以下方式进行非常简单的页面设置：

蓝色div的高度应为25％，紫色div的高度应为75％。如果蓝色div中的行过多，则应保持与滚动条相同的大小。这适用于几行，但在某些时候会中断，蓝色的div会溢出并变成紫色的。我是Flexboxes的新手，所以我真的不明白为什么会这样。不使用弹性框会更好吗？感谢此时的任何提示或指示。

这是我使用的代码（全页显示）：

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属性正常工作，容器需要实际的高度或最大高度。弯曲高度（Property 'prop{1,2,3}' has no initializer and is not definitely assigned in the constructor. 上有flex: 1）不会削减。

为了使.content生效，块级容器 必须具有设置的高度（overflow或height）或 max-height设置为white-space。 〜MDN

由于您已经知道主要容器（nowrap）的高度和前两行（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;
}

jsFiddle demo

Answer 2

我希望这就是您的意思，但是如果我错了，请您道歉。我看到的问题在于您使用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;
} 

Answer 3

将CSS的顶部更改为此：

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