Ряды равной высоты в гибком контейнере ⇐ Html

[Anonymous]

Как вы можете видеть, List-items в первой строке имеет одинаковую высоту . Но элементы во второй строке имеют разные высоты . Я хочу, чтобы все элементы имели равномерную высоту .

Есть ли способ достичь этого без предоставления фиксированного пожила и только использования flexbox ? src = "https://i.sstatic.net/kvxvj.png" /> < /p>

Вот мой код < /code> < /p>

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

.list {
display: flex;
flex-wrap: wrap;
max-width: 500px;
}
.list-item {
background-color: #ccc;
display: flex;
padding: 0.5em;
width: 25%;
margin-right: 1%;
margin-bottom: 20px;
}
.list-content {
width: 100%;
}< /code>
[list]
[*]

box 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

[*]

box 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

[*]

box 2
Lorem ipsum dolor

[*]

box 2
Lorem ipsum dolor

[*]

h1

[/list]

Подробнее здесь: https://stackoverflow.com/questions/360 ... -container