CODEWITHSUNDEEP
cssbootstrap-4
Mark
Mark

Reputation: 4970

Div is not resizing

I have the following 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>

And css:

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

Fiddle

What I want is when I resize it vertically the blue div will be resizing until it reaches its min-height. But that is not happening. It's not resizing at all. Any help?

Thanks

Upvotes: 0

Views: 40

Answers (1)

Harshal Parekh
Harshal Parekh

Reputation: 6027

The problem here is you are setting the height statically to 200px. Thus no matter what the screen size, it is going to stay 200px.

To vertically resize the height, you should use the "vh" property.

I'm assuming you just want to resize the height vertically and enforce the min-height property.

Here is your modified 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

}

Upvotes: 1

Related Questions