Equal height rows in a flex container

Question

As you can see, the list-items in the first row have same height. But items in the second row have different height

Answer 1

for same height you should chage your css "display" Properties. For more detail see given example.

.list{
  display: table;
  flex-wrap: wrap;
  max-width: 500px;
}

.list-item{
  background-color: #ccc;
  display: table-cell;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content{
  width: 100%;
}

  

    

    
box 1
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    
  
  

    

    
box 2
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    
  
  
    

    

    
box 2
    
Lorem ipsum dolor
    
  
  
    

    

    
box 2
    
Lorem ipsum dolor
    
  
  

    

      
h1