内容溢出 flex 项目尽管溢出属性

Question

我使用 flexboxes 按照以下方式设置了一个非常简单的页面：

蓝色 div 应该占高度的 25%，紫色 div 应该占 75%。如果蓝色 div 中的行太多，它应该保持相同的大小并显示滚动条。这适用于几行，但在某些时候中断，蓝色 div 溢出并长成紫色。我是 flexboxes 的新手，所以我真的不明白为什么会这样。不使用 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

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

将 CSS 的顶部更改为：

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

Answer 3

要使 overflow 属性正常工作，容器需要实际高度或 max-height。 Flex 高度（您在 .content 上有 flex: 1）不会削减它。

In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to 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>

内容溢出 flex 项目尽管溢出属性

Content overflowing flex item despite overflow property

html

css

overflow

flexbox

jsFiddle demo

内容溢出 flex 项目尽管溢出 属性

Content overflowing flex item despite overflow property

html

css

overflow

flexbox

jsFiddle demo

内容溢出 flex 项目尽管溢出属性