CSS div nicht respektieren Eltern Grenze

Question

Ich versuche, ein div in einem anderen div mit einem max-height Set, um diese Höhe zu respektieren, so dass der Inhalt innerhalb vertikal scrollbar.

Ich habe eine Liste Reihe von Etiketten innerhalb einer div, die eine display:block haben und sie richtig angezeigt werden. Das Eltern-Div-Element wird so erweitert, dass die Labels aus der Max-Höhe des Elternelements herausbrechen, was unerwünscht ist.

Ich habe versucht, Überlauf sowie relative Position auf dem Eltern und absolute auf dem Kind (Container) und umgekehrt ohne Erfolg. Ich würde gerne wissen, warum die list-container nicht die content-containersmax-height param respektiert.

#container { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
#content-container { 
 
    width: 500px; 
 
    max-height: 20%; 
 
    margin: auto; 
 
    margin-top: 2%; 
 
    font-size: 20px; 
 
    border: 1px solid blue; 
 
} 
 

 
#list-container { 
 
    padding-top: 20px; 
 
    padding-left: 10px; 
 
    border: 1px solid green; 
 
} 
 

 
.list-item { 
 
    /* width: 100%; */ 
 
    display: block; 
 
    border: 1px solid salmon; 
 
}

<div id="container"> 
 
    <div id="content-container"> 
 
    <div id="list-container"> 
 
     <label class="list-item">Content 1</label> 
 
     <label class="list-item">Content 2</label> 
 
     <label class="list-item">Content 3</label> 
 
     <label class="list-item">Content 4</label> 
 
     <label class="list-item">Content 5</label> 
 
     <label class="list-item">Content 6</label> 
 
     <label class="list-item">Content 7</label> 
 
    </div> 
 
    </div> 
 
</div>

Dank!

Answer 1

Wenn Sie es sein scrollbaren wollen, sollten Sie overflow: auto oder overflow: scroll verwenden:

#container { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#content-container { 
 
    width: 500px; 
 
    max-height: 20%; 
 
    overflow: auto; 
 
    margin: auto; 
 
    margin-top: 2%; 
 
    font-size: 20px; 
 
    border: 1px solid blue; 
 
} 
 
#list-container { 
 
    padding-top: 20px; 
 
    padding-left: 10px; 
 
    border: 1px solid green; 
 
} 
 
.list-item { 
 
    /* width: 100%; */ 
 
    display: block; 
 
    border: 1px solid salmon; 
 
}

<div id="container"> 
 
    <div id="content-container"> 
 
    <div id="list-container"> 
 
     <label class="list-item">Content 1</label> 
 
     <label class="list-item">Content 2</label> 
 
     <label class="list-item">Content 3</label> 
 
     <label class="list-item">Content 4</label> 
 
     <label class="list-item">Content 5</label> 
 
     <label class="list-item">Content 6</label> 
 
     <label class="list-item">Content 7</label> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

overflow: scroll; In der #content-container

jsfiddle

Answer 3

#container { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
#content-container { 
 
    width: 500px; 
 
    max-height: 20%; 
 
    margin: auto; 
 
    margin-top: 2%; 
 
    font-size: 20px; 
 
    border: 1px solid blue; 
 
    overflow:auto; //or overflow:hidden? 
 
} 
 

 
#list-container { 
 
    padding-top: 20px; 
 
    padding-left: 10px; 
 
    border: 1px solid green; 
 
} 
 

 
.list-item { 
 
    /* width: 100%; */ 
 
    display: block; 
 
    border: 1px solid salmon; 
 
}

<div id="container"> 
 
    <div id="content-container"> 
 
    <div id="list-container"> 
 
     <label class="list-item">Content 1</label> 
 
     <label class="list-item">Content 2</label> 
 
     <label class="list-item">Content 3</label> 
 
     <label class="list-item">Content 4</label> 
 
     <label class="list-item">Content 5</label> 
 
     <label class="list-item">Content 6</label> 
 
     <label class="list-item">Content 7</label> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

Sie sind fast da. Es fehlt nur noch overflow: auto auf Ihrem #content-container. Auf diese Weise wird der Bereich scrollbar.

ein Code Stift, damit Sie verstehen: http://codepen.io/sandrina-p/pen/akRQEY