弹性和溢出：奇怪的行为[重复]

Question

编辑：添加了 flex-direction: 列，在初始代码中错过了它。

当子级具有overflow:auto 而父级具有overflow:auto 时，滚动条会出现在子级上。

但是当overflow:auto从parent中移除时，滚动条出现在grand-parent上。

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: "Roboto", sans-serif;
}

body {
  margin: 0;
  padding: 0;
}

.App {
  display: flex;
  height: 100%;
}

.grand-parent {
  display: flex;
  flex-direction: column;
  background: red;
  overflow: auto;
  padding: 20px;
}

.parent {
  display: flex;
  overflow: auto;
  padding: 20px;
  background: green;
}

.child {
  overflow: auto;
  font-size: 156px;
}

<div class="App">
  <div class="grand-parent">
    <div class="parent">
      <div class="child">
        Some content which grows bigger
      </div>
    </div>
  </div>
</div>

这是为什么呢？我仍然希望滚动条出现在孩子身上。 浏览器布局算法在这里是如何工作的？

编辑：

奇怪的是，这种行为似乎取决于grand-parent 拥有flex-direction: column。当flex-direction: row

在 Chrome 75、Firefox 67 上测试

这似乎与祖父上的flex-direction有关，如果flex-direction为row，则水平滚动显示此行为，如果flex-direction为column，则垂直滚动显示此行为

编辑： 在进一步的实验中，如果我们在 parent 上设置 min-height: 0，它的行为与预期一样，所以这个问题可能类似于

https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/

https://css-tricks.com/flexbox-truncated-text/

Answer 1

对于overflow-y，控制内容如何溢出父垂直边缘的CSS属性，默认值为visible。 Here is how it works:

内容不会被剪裁，并且可能会呈现在填充框的顶部和底部边缘之外。

这意味着如果内容不适合框，一些内容将呈现在框外。

但是，此属性不是inherited。下面的 CSS 不会将 ID 为 parent 的 div 的子级上的 overflow 属性设置为 auto：

var parentElem = document.getElementById('parent');
var childElem = document.getElementById('child');

console.log('overflow-y property of parent element: ' + window.getComputedStyle(parentElem).overflowY)
console.log('overflow-y property of child element: ' + window.getComputedStyle(childElem).overflowY)

#parent {
    overflow: auto;
}

<div id="parent">
  <div id="child">
    Some content
  </div>
</div>

这意味着当子框中的内容溢出时，滚动条会被浏览器自动显示在父框上；您必须根据需要明确指定子节点上的属性。