因为这篇文章在Google的排名仍然很高，我想用flexbox发布一个更好的解决方案。其实这很简单。使用显示：flex，flex-direction：列和溢出：hiddenfor parent和overflow-y：自动为孩子。

.wrapper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.scrollable-child {
  overflow-y: auto;
}

这是笔：https://codepen.io/pawelsas/pen/vdwjpj

溢出仅在您为它指定一个值以在大于时溢出时起作用。你的值是相对于顶部的大小，所以使用jQuery，获取该值，然后从父对象中减去。

$(document).ready(function() {
  $(".child2").css("max-height", ($(".parent").height()-$(".child1").height()));
});

并将overflow添加到子节点

.child1 {
    background-color: red;
    overflow: hidden;
}

.child2 {
    background-color: blue;
    overflow: auto;
}

http://jsfiddle.net/m9goxrbk/

使用overflow属性：

.parent {
    width: 50px;
    height: 100px;
    border: 1px solid black;
    overflow: auto;
}

jsFiddle

• 编辑：*

如果你只想让第二个div可以滚动，你需要将它的高度改为30px，这样child1和child2就可以完全适应父级height，并在那里添加overflow属性：

.parent {
    width: 50px;
    height: 100px;
    border: 1px solid black;
}

.child1 {
    height: 70px;
    background-color: red;
}

.child2 {
    height: 30px;
    background-color: blue;
    overflow: auto;
}

jsFiddle

嵌套子div时

这种解决方案是滚动溢出的子div，而不是在嵌套div时滚动整个父div。
请参阅随附图片。预期的行为在右侧？？
将下面的CSS添加到所有需要将滚动条向下传递到可滚动子对象的父div（Parent，Child1，Child2）中。（flex列使div采用可用高度）

.all-parents {
   display: flex;
   flex-direction: column;
   overflow: auto;
}

溢出的目标元素（Child 3）应该被分配overflow: auto以启用滚动。

.element-that-overflows {
   overflow: auto;
}

**注意：**需要为最上面的父节点指定固定高度（Parent），才能滚动子节点，否则滚动父节点。

.parent {
  height: 100vh;
}

Open in Stackblitz