如果超过父高度，如何使子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

溢出仅在大于时为溢出值赋值时才起作用。你的值与top的大小有关，因此使用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/

Answer 2

由于这篇文章在谷歌中仍然排名很高，我想使用flexbox发布一个更好的解决方案。其实这很简单。使用display：flex，flex-direction：column和overflow：隐藏为parent和overflow-y：auto for child。

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

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

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

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