Here is my flex box UL:
ul { box-sizing: border-box; padding: 0px; margin-top: 0px; margin-bottom: 0px; max-width: 1159px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap:25px;}And the li's:
ul>li { box-sizing: border-box; margin: 0px; padding: 0px; flex-basis: calc((100% - 50px) * 0.333333); border-radius: 35px; position:relative;}I have some rows, each row containing 3 li's, and on each row, all the li's have the height of the highest li on the row, depending on how large is its content. The problem is that this height isn't kept on the second/third/etc row - all li's on the second row, for example, will have the height of the highest li on the second row, but there's nothing to ensure this coincides with the max height of the first row. I would like to make all the li's, regardless of their content and of the row they are on, have the height of the highest li in the entire list, however large it may be. I would like to accomplish this with css only and by using flexbox (not css grid). Is this possible?
I tried height:auto or align-self:stretch or align-content:stretch`, nothing seems to work. However, I would like to be sure.