如果超过父高度，如何使子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：列和溢出：隐藏， overflow-y：auto 对于孩子。

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

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

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

Answer 2

溢出仅在大于时为溢出值赋值时才起作用。你的值与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 3

使用overflow属性：

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

jsFiddle

编辑：

如果您只希望第二个div可滚动，则需要将其高度更改为30px，以便child1和child2完全适合父height并添加{ {1}}那里的财产：

overflow

jsFiddle