ANSWER

Question

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

我已经在stackoverflow上查看了overflow: hidden个问题，但是大多数问题要么出现问题position，要么建议我的代码可以正常运行。

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

<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>中有多个#parent，所以我无法给#scroller一个高度。
html会自动生成，因此我无法删除#scroller。

感谢您的帮助，斯蒂芬

ANSWER

display: flex的评论中实际上只有一个CSS答案。参见：

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%;
}

Demo

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

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

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

Answer 2

display: flex的评论中实际上只有一个CSS答案。参见：

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;会怎么样。这具有添加滚动条所需的效果。

Answer 4

对于后代 - 我使用基金会的Reveal叠加层也遇到了同样的问题。

body.is-reveal-open有overflow: hidden;

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

我想要有一个滚动条的子元素有一个明确的高度，一个较小的最大高度和overflow: scroll。

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

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

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

Answer 5

这里是Bootstrap 4用户的解决方案，您只需要关心如何将正确的Flex相关类放在正确的位置即可。由于parent只有1个直属子，因此非常简单：

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>的剩余高度，那么您将需要应用{{1} }类，而不是flex-grow-1的{{1}}类。（对于熟悉android开发的人来说，h-100在约束布局中的作用与scroller或flex-grow-1相似）

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

我的期望

会发生什么

简单的解决方法呢？

ANSWER

5 个答案: