Right now, my orange squares (the children in the flex container) work as intended and they are all the same height, but I can't make it work for the red ones.
I want to make the height of the red items (the children of the children) all have the same height as the highest one.
My HTML is the following:
.container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center;}.col { flex: 1; background:orange; margin: 1px;}.col-item { margin: 15px;}<html><body><div class="container"><div class="col"><div class="col-item" style="background: red;"><h2>Column 1</h2><p>Hello World</p></div></div><div class="col"><div class="col-item" style="background: red;"><h2>Column 2</h2><p>Hello World!</p><p>Hello World!</p><p>Hello World!</p><p>Hello World!</p></div></div><div class="col"><div class="col-item" style="background: red;"><h2>Column 3</h2><p>Some other text..</p><p>Some other text..</p></div></div></div></body></html>