I am mapping over an array of 'services' and transforming each one in a <li>
. Their names vary, some very short, others longer that take up two lines.
The photo may look like a table but I really intend to do this with <li>
.
I would like to have all of the <li>
of the same height as those that take up the most space. I've tried min-height
but that won't fit nicely like they should (filling all of the empty space)
This is what I'm trying
serviceList.map(service => <li className="service">service</li>)
.service {
border-radius: 0;
// min-height: 10px; //doesn't fill the empty spaces nicely
width: 20%;
padding: 12px
}
flex
. If you want this across all lines, same height for all items - then you will probably have to use JavaScript to determine the maximum height, and then set that explicitly.