Wie kann man ein untergeordnetes div scrollbar machen, wenn es die Höhe des übergeordneten Elements überschreitet?

Ich habe 2 untergeordnete Divs, die in einem übergeordneten Div im Zeilen-Spalten-Muster verschachtelt sind: Das übergeordnete Element ist eine Spalte und die untergeordneten Elemente sind Zeilen.

Das obere Kind-Div hat eine variable Höhe, ist aber garantiert kleiner als die Höhe des Eltern-Div.

Das untere untergeordnete div hat ebenfalls eine variable Höhe. In einigen Fällen führt die Höhe der untergeordneten Divs dazu, dass das untere untergeordnete Div das übergeordnete Element überschreitet. In diesem Fall muss ich das untere div scrollbar machen. Beachten Sie, dass ich möchte, dass nur das untere Div scrollbar ist, nicht das gesamte übergeordnete Div.

Wie gehe ich damit um?

Siehe beigefügtes jsfiddle für ein Fallbeispiel: 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;
}

Da dieser Beitrag bei Google immer noch sehr hoch rankt, möchte ich eine bessere Lösung mit Flexbox posten. Eigentlich ist das ganz einfach. Verwenden Anzeige: flex, Biegerichtung: Spalte und Überlauf versteckt für Eltern u Überlauf-y: auto für Kind.

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

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

Hier ist der Stift:
https://codepen.io/pawelsas/pen/vdwjpj

Überlauf funktioniert nur, wenn Sie ihm einen Wert für Überlauf geben, wenn dieser größer als ist. Ihr Wert ist relativ dazu, wie groß die Spitze ist. Verwenden Sie also jQuery, holen Sie sich diesen Wert und subtrahieren Sie ihn dann vom übergeordneten Wert.

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

und hinzufügen overflowist für die Kinder

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

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

http://jsfiddle.net/m9goxrbk/

Verwenden overflow Eigentum:

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

jsFiddle

BEARBEITEN:

Wenn Sie möchten, dass nur das zweite div scrollbar ist, müssen Sie die Höhe auf ändern 30px Also child1 und child2 wird genau zu den Eltern passen height und hinzufügen overflow Eigentum dort:

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

.child1 {
    height: 70px;
    background-color: red;
}

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

jsFiddle