Div nicht Ändern der Größe

Question

Ich habe folgendes Markup:

<div class="card" style="height:100%"> 
    <div class="controlPanelContainer"> 
    <div class="card" style="background-color:yellow;height:200px">  
    </div> 
    <div class="card" 
    style="background-color:blue;height:200px;min-height:100px;margin- 
     top:5px;overflow-y:auto;"> 
    With Bootstrap, you get extensive and beautiful documentation for common 
    HTML elements, dozens of custom HTML and CSS components, and awesome 
    jQuery plugins. With Bootstrap, you get extensive and beautiful 
    documentation for common HTML elements, dozens of custom HTML and CSS 
    components, and awesome jQuery plugins.With Bootstrap, you get extensive 
    and beautiful documentation for common HTML elements, dozens of custom 
    HTML and CSS components, and awesome jQuery plugins.With Bootstrap, you 
    get extensive and beautiful documentation for common HTML elements, 
    dozens of custom HTML and CSS components, and awesome jQuery plugins.With 
    Bootstrap, .... 
    </div> 
</div> 
<div class="card-footer" style="height:40px">Footer  
</div> 
</div> 

und CSS:

.controlPanelContainer { 
    display: flex; 
    flex-flow: column; 
} 

Fiddle

Was ich will, ist, wenn ich es vertikal die blaue div Größe ändern wird Ändern der Größe bis es seine minimale Höhe erreicht. Aber das passiert nicht. Es ändert sich überhaupt nicht. Irgendeine Hilfe?

Dank

Answer 1

Das Problem hierbei ist, dass Sie die Höhe statisch auf 200px setzen. Also egal, wie groß die Bildschirmgröße ist, es bleibt 200px.

Um die Höhe vertikal zu ändern, sollten Sie die Eigenschaft "vh" verwenden.

Ich nehme an, Sie möchten nur die Höhe vertikal ändern und die Min-Höhe-Eigenschaft erzwingen.

Hier ist Ihre modifizierte Code:

<div class="card"> 
<div class="controlPanelContainer"> 
    <div class="card" style="background-color:yellow;height:200px"> 
    </div> 
    <div class="card" style="background-color:blue;height:30vh;min-height:100px;margin-top:5px;overflow-y:auto;"> 
     With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins. With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens 
     of custom HTML and CSS components, and awesome jQuery plugins.With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.With Bootstrap, you 
     get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom 
     HTML and CSS components, and awesome jQuery plugins.With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.With Bootstrap, you get extensive 
     and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins. 
    </div> 
</div> 
<div class="card-footer" style="height:40px">Footer 
</div> 

.controlPanelContainer { 
display: flex; 
flex-flow: column; 
height: 100vh 

}