css - Div 未调整大小

Question

我有以下标记:

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

和CSS:

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

Fiddle

我想要的是当我垂直调整它的大小时，蓝色 div 将调整大小直到它达到它的最小高度。但这并没有发生。它根本没有调整大小。有帮助吗？

谢谢

Answer 1

这里的问题是您将高度静态设置为 200 像素。因此无论屏幕尺寸如何，它都将保持 200 像素。

要垂直调整高度，您应该使用“vh”属性。

我假设您只想垂直调整高度并强制执行 min-height 属性。

这是您修改后的代码:

<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