I have a menu consisting of ul and li simplified as below. I do not want to set a fixed height in px neither for ul or li. For the li I am using height: fit-content. The height of all the li might change according to the text inside. What I want is all the li to have the same height as the biggest height (or the parent flexul) and the use justify-content: space-between; for my div.wrapp. We could achieve this with JavaScript by getting the height value of the highest li but is there an easier CSS only solution?
.ul_listing { display: flex; flex-direction: row; width: 450px;}.lists { display: flex; /*height: 250px; /*works with fixed height */ height: fit-content; /*does not work with fit-content*/}.wrapp { display: flex; align-items: center; flex-direction: column; justify-content: space-between; /* does not work if fit-content for li */}<ul class="ul_listing"><li class="lists"><a href=""><div class="wrapp"><p>testint</p><img src="https://picsum.photos/id/237/200/300" width="50px" height="50px" alt=""></div></a></li><li class="lists"><a href=""><div class="wrapp"><p>testing length</p><img src="https://picsum.photos/id/237/200/300" width="50px" height="50px" alt=""></div></a></li><li class="lists"><a href=""><div class="wrapp"><p>testing lenth of text</p><img src="https://picsum.photos/id/237/200/300" width="50px" height="50px" alt=""></div></a></li><li class="lists"><a href=""><div class="wrapp"><p>testing big length when text on li</p><img src="https://picsum.photos/id/237/200/300" width="50px" height="50px" alt=""></div></a></li></ul>