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

you can do it by fixing the height of "P" tag or fixing the height of "list-item".

I have done by fixing the height of "P"

and overflow should be hidden.

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

.list-item{
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content{
  width: 100%;
}
p{height:100px;overflow:hidden;}

  

    

    
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