Make all LI to the height of the largest using CSS

Question

I have some elements <li> that I guide to stay inline-block. However, as the content of each <li> it’s different, they end up getting DIFFERENT HEIGHT. Kind of like this:

However, the correct thing is that the <li> with less content take the same height as the <li> bigger, and stay aligned, like this:

How to solve this?

Answer 1

Let ALL blocks of the same size using only CSS do not know if it is possible (unknown) since each line becomes independent, but each element of a line has a certain connection and can be used as parameter to keep all others (of the same line) of the same size.

The easiest way to achieve this result is by using Flex:

ul{
  list-style: none;
  padding: 0;margin: 0;
  display: flex;
  flex-wrap: wrap;
}

li{
  width: 25%;
  border: 5px solid black;
  margin: 5px;
  padding: 3px; 
}

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi rerum doloremque laborum? </li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quasi corporis sed fugit quibusdam, possimus ipsam animi ab molestias. Eos qui id sint mollitia amet officiis, commodi natus officia libero.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>

the display: flex by default will already leave all elements with the same size, but you lose control over their width it will try to leave everything in the same line, disregarding the defined width or limits of the page or parent element, which can be solved using the flex-wrap, that allows you to break the line as soon as the elements pass the screen.

There is an alternative, but it does not solve 100%.

Answer 2

You can set the property min-height a value according to the content. Ex.: if your major li has 200px, set:

   li {
       min-height: 200px;
    }