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

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 datatable (来自datatables.net)。

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

和bootstrap 4 styles

Answer 1

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

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

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

请参见：

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

另请参阅MDN

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