Gleich hohe Reihen in einem Flexcontainer ⇐ HTML

[Guest]

Wie Sie sehen können, haben die Listenelemente in der ersten Zeile die gleiche Höhe. Aber Elemente in der zweiten Reihe haben unterschiedliche Höhen. Ich möchte, dass alle Elemente eine einheitliche Höhe haben.

Gibt es eine Möglichkeit, dies zu erreichen, ohne fixed-height anzugeben? Verwenden Sie Flexbox?




Hier ist mein Code

Code: Select all

.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: Select all

[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]