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

我已经浏览过overflow: hiddenstackoverflow 上有问题，但大多数都有问题position或者似乎表明我的代码应该可以工作。

这是一个MWE，你可以找到jsfiddlehere https://jsfiddle.net/huocukw7/1/:

<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 has overflow: hidden so #scroller被剪裁到父级的高度。因为它是#child比结果高度高overflow: scroll结果出现滚动条。

会发生什么

#scroller只是使用高度#child并忽略两者overflow特性。

简单的解决方法怎么样？

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

感谢大家的帮助， 斯特凡

ANSWER

实际上，评论中有一个仅 CSS 的答案display: flex. See:

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

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

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

#child {
  height: 10000px;
}

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

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

Demo https://jsfiddle.net/huocukw7/3/

根据你的观点 -在我的现实世界问题中，#parent 中有多个 s，所以我无法给 #scroller 高度。

没有其他方法可以使其可滚动而不分配height到它。如果没有它，它会拉伸直到子元素结束，这不会使你的包装器可滚动。

您可以在这里使用 JavaScript 来计算height在运行时并将其附加到元素。