我有兩個子div以行列模式嵌套在父div中:父div是列，子div是行。

上面的子div的高度可變，但保證小于父div的高度。

下面的子div也是可變高度的。在某些情況下，子div的高度會使較低的子div超過父div。在這種情況下，我需要使下面的div可滾動。注意，我只希望下面的div是可滾動的，而不是整個父div。

我該怎么處理這件事？

案例見附件js fiddle: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;
}

因為這個帖子在谷歌的排名仍然很高，我想用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

溢出只有在你給它一個大于時溢出的值時才起作用。您的值與頂部的大小有關，因此使用jQuery，獲取該值，然后從父值中減去。

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

給孩子們加上溢出的

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

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

http://jsfiddle.net/m9goxrbk/

使用溢出屬性:

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

jsFiddle

編輯:

如果您希望只有第二個div是可滾動的，您需要將它的高度更改為30px，這樣child1和child2將完全適合父高度，并在那里添加溢出屬性:

.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。

參考附圖。預期的行為是在右邊?

將下面的CSS添加到所有需要將滾動條向下傳遞給可滾動子對象的父div(Parent，Child1，Child2)中。(彈性柱使div占據可用高度)

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

溢出的目標元素(子元素3)應該被分配overflow: auto以啟用滾動。

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

注意:您需要為最頂端的父級(parent)指定一個固定的高度，以使子級滾動，否則父級滾動。

.parent {
  height: 100vh;
}

在Stackblitz打開