元素溢出父级和滚动不起作用

Question

我不是 css 专家，我不明白为什么我的右下 div 不能按预期工作。

我正在使用 jquery 扩展 (jquery-resizable) 来调整一些面板的大小，并且我希望我的最后一个 div .overflow-container（2 级）保持其父 div #resizable-panel-right-bottom（1 级）的大小。没关系，但是如果我在内部 div .overflow-content（第 3 级）中为高度设置了一个较高的值，那么 .overflow-container（第 2 级）的高度就不再正确了。

这里我有一个关于codepen 的草稿，我想做什么：

#resizable-panel-right-bottom {
    flex: 1 1 auto;
    min-height: 200px;
    padding: 5px;
}
.overflow-container {
  height: 100%;
  padding: 5px;
  background: aqua;
  overflow: scroll; /*should be "overflow: auto" I know*/
}
.overflow-content {
  height: 1000px;
  padding: 5px;
  background: pink;
}

目标是在最后一个 div 中有一个 jquery 数据表（来自 datatables.net）。

其实我正在使用这个 JS 库： jQuery 3.3.1 bootstrap 4 jquery-resizable

还有bootstrap 4 styles

Answer 1

您需要重新配置您的高度定义。

问题是您将height: 100% 分散在整个HTML 结构中。但是，要正确识别百分比高度，它们必须在父级上具有定义的高度。

弹性高度，就像在某些地方使用 flex-basis: auto 一样，并不总是足够的。

见：

• Working with the CSS height property and percentage values
• Chrome / Safari not filling 100% height of flex parent

另见MDN:

为了使overflow 生效，块级容器必须设置高度（height 或max-height）或将white-space 设置为nowrap。