嵌套溢出滚动隐藏的溢出不起作用

Question

我有一个问题，即div没有被剪切到父级，即使它有overflow: hidden 。

我已经查看了overflow: hidden这里有关于stackoverflow的overflow: hidden问题，但是大多数问题都有position问题或似乎暗示我的代码应该有效。

这是一个MWE，你可以在这里找到jsfiddle ：

<div id="parent">
  <div id="scroller">
    <div id="child">
      meh
    </div>
  </div>
</div>

CSS：

#parent {
  height: 500px;
  overflow: hidden;
}

#scroller {
  overflow: scroll;
}

#child {
  height: 10000px;
}

我所期待的

#parent有overflow: hidden因此#scroller被剪裁到父级的高度。 因为它的#child比生成的高度overflow: scroll高overflow: scroll导致滚动条。

怎么了

#scroller才用高度#child而忽略两者overflow性。

简单的解决方法呢？

• 在我的真实世界问题中， #parent有多个<div> ，所以我不能给#scroller一个高度。
• html是自动生成的，所以我不能只删除#scroller 。

谢谢你的帮助，Stefan

回答

在评论中实际上只有一个CSS-only答案， display: flex 。 看到：

https://jsfiddle.net/huocukw7/6/

#parent {
  height: 500px;
  overflow: hidden;
  display: flex;
  flex-direction:column;
}

#scroller {
  overflow: auto;
  flex-grow:1;
}

#child {
  height: 10000px;
}

Answer 1

您需要做的就是为#scroller提供height

#scroller {
  overflow: scroll;
  padding: 10px;
  background-color: red;
  height: 100%;
}

演示

---

按照你的观点 - 在我的真实世界问题中，＃parent中有多个s，所以我不能给#scroller一个高度。

如果没有为其指定height ，没有其他方法可以使其可滚动。 如果没有它，它将延伸直到子元素结束，这将不会使您的包装器可滚动。

您可以在此处使用JavaSript来计算运行时的height并将其附加到元素。

Answer 2

在评论中实际上只有一个CSS-only答案， display: flex 。 看到：

https://jsfiddle.net/huocukw7/6/

#parent {
  height: 500px;
  overflow: hidden;
  display: flex;
  flex-direction:column;
}

#scroller {
  overflow: auto;
  flex-grow:1;
}

#child {
  height: 10000px;
}

Answer 3

虽然你说你不能为#scroller添加一个显式高度，但是添加height:inherit;怎么样height:inherit; 。 这具有添加滚动条的期望效果。

Answer 4

对于后代 - 我使用Foundation的Reveal叠加层也有同样的问题。

body.is-reveal-open overflow: hidden;

.reveal-overlay有overflow-y: scroll; （< - 这是罪魁祸首）

我希望有一个滚动框的我的子元素有一个很大的显式高度，一个较小的最大高度和overflow: scroll 。

经过大量调试后，我缩小了问题的范围，最终解决了这个问题：

.reveal-overlay {
  overflow: hidden; // changed from overflow-y: scroll
}

不要问我为什么这样，我不知道。 但确实如此。

Answer 5

这是Bootstrap 4用户的解决方案，您需要关注的只是如何将正确的Flex相关类放在正确的位置。 由于parent只有一个直接孩子，所以很简单：

HTML

<div class="d-flex flex-column" id="parent">
  <div class="h-100" id="scroller">
    <div id="child">
      meh
    </div>
  </div>
</div>

CSS （你不需要用CSS做任何事情，我只是从问题中复制它）

#parent {
  height: 500px;
  overflow: hidden;
}

#scroller {
  overflow: scroll;
}

#child {
  height: 10000px;
}

还有一个提示：如果您在parent下有多个直接子级并且需要scroller来填充parent <div>的剩余高度，那么您需要将flex-grow-1类而不是h-100应用于scroller 。 （对于那些谁熟悉Android的发展， flex-grow-1具有与类似的效果layout_height=0dp或layout_width=0dp在constraintlayout）