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

Question

我有一个问题,即div已经没有被剪切到父级overflow: hidden.

我在overflow: hidden这里查看了有关stackoverflow 的问题,但是大多数问题都存在问题,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导致滚动条.

怎么了

#scroller只使用高度#child并忽略这两个overflow属性.

简单的解决方法呢？

• 在我的现实世界问题中有多个<div>s,#parent所以我无法给出#scroller高度.
• html是自动生成的,所以我不能删除#scroller.

谢谢你的帮助,Stefan

回答

在评论中实际上只有一个CSS答案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

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

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

演示

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

没有其他方法可以在不指定的情况下使其可滚动height.如果没有它,它将延伸直到子元素结束,这将不会使您的包装器可滚动.

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

Answer 2

实际上，在带有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;
}