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

Question

我有 2 个子 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给孩子。

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

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

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

Answer 2

只有当你给它一个大于时溢出的值时，溢出才有效。您的值与顶部的大小有关，因此使用 jQuery，获取该值然后从父级中减去。

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

并将overflow's 添加到孩子

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

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

http://jsfiddle.net/m9goxrbk/

Answer 3

使用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