html - 当子div超过父高度时如何使它可滚动？

Question

我有 2 个子 div 以行-列模式嵌套在父 div 中:父级是一列，子级是行。

上层子 div 的高度可变，但保证小于父 div 的高度。

下面的子 div 也是可变高度的。在某些情况下，子 div 的高度会使较低的子 div 超过父 div。在这种情况下，我需要使下方的 div 可滚动。请注意，我只希望下方的 div 可滚动，而不是整个父 div。

我该如何处理？

案例示例见附件 jsfiddle:http://jsfiddle.net/0yxnaywu/5/

HTML:

 <div class="parent">
    <div class="child1">
        hello world filler
    </div>
    <div class="child2">
        this div should overflow and scroll down
    </div>
</div>

CSS:

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

.child1 {
    background-color: red;
}

.child2 {
    background-color: blue;
}

Answer 1

因为这篇文章在 Google 中的排名仍然很高，所以我想发布一个使用 flexbox 的更好的解决方案。其实这个很简单。使用 display: flex, flex-direction: column 和 overflow: hidden 作为父级和 overflow-y: auto给 child 。

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

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

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