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 flex ul) and the use justify-content:space-betwween; for my div.wrapp. We could achieve this with javascript by getting the height value of the highest li but is there a easier css only solution?
<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>.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 */}