How to force DIVs to have the same height?

Question

Using DIVs I have 1 Row x 4 Columns that can become 2 Rows x 2 Columns with responsive:

div.group {     
   margin: 48px -24px;
     box-sizing: border-box;
   clear: both;
}
div.group::after, div.group::before {
  box-sizing: border-box;
}
div.block {            
   padding: 24px 24px; 
     box-sizing: border-box;
   width: 25%;
   float: left;
}
div.block::after, div.block::before {
  box-sizing: border-box;
}
div.block:nth-child(4n+1) {clear: left;}
div.main::after {
  background: transparent url("https://i.stack.imgur.com/qN0S5.png") no-repeat center top / 100% auto;
  content: "";
  display: block;
  height: 80px;
  width: 100%;
}
div.case {
  background-color: rgb(42, 157, 143);
  padding: 24px;
  border-radius: 4px 4px 0 0; 
}

        <div class="group">

          <div class="block">
            <div class="main">
              <div class="case">
                <h2>One</h2>          
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
              </div>
            </div>
          </div>

          <div class="block">
            <div class="main">
              <div class="case">
                <h2>Two</h2>          
                <p>Lorem ipsum.</p> 
              </div>
            </div>
          </div>

          <div class="block">
            <div class="main">
              <div class="case">
                <h2>Three</h2>          
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
              </div>
            </div>
          </div>       

          <div class="block">
            <div class="main">
              <div class="case">
                <h2>Four</h2>          
                <p>Lorem ipsum dolor sit amet.</p> 
              </div>
            </div>
          </div>   

        </div>

How to force all divs to have the same height even if content is different?

score -1 · Answer 1 · answered Jun 17 '23 at 22:34

You can use CSS Flexbox to get all your divs to the same height. Just apply display: flex, flex-wrap: wrap, and align-items: stretch to your .group class.

Next, make sure each .block can expand to fill the space. For that, add display: flex, flex-direction: column to the .block class and flex-grow: 1 to the .main class.

How to force DIVs to have the same height?

1 Answers1