Как мы можем заставить дочерний элемент заполнять высоту своего родителя, если не используется фиксированная высота, а и ⇐ CSS

[Anonymous]

У меня есть меню, состоящее из ul и li, упрощенное, как показано ниже. Я не хочу устанавливать фиксированную высоту в пикселях ни для ul, ни для li. Для li я использую height: fit-content. Высота всех ли может меняться в зависимости от текста внутри. Я хочу, чтобы все li имели ту же высоту, что и самая большая высота (или родительский flex ul), и использовали justify-content: space-between; для моего div.wrapp. Мы могли бы добиться этого с помощью JavaScript, получив значение высоты самого высокого значения li, но есть ли более простое решение, использующее только CSS?

Код: Выделить всё

.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 */
}

Код: Выделить всё

[list]
[*]testint

[img]https://picsum.photos/id/237/200/300[/img]

[*]
testing length

[img]https://picsum.photos/id/237/200/300[/img]

[*]
testing lenth of text

[img]https://picsum.photos/id/237/200/300[/img]

[*]
testing big length when text on li

[img]https://picsum.photos/id/237/200/300[/img]

[/list]

Подробнее здесь: https://stackoverflow.com/questions/795 ... -not-using