Give equal height to children of elements within a flex container
Question
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>
2 answers
solution1
1 ACCPTED 2020-09-05 18:42:03
The flex properties on the parent container ( container in your example) don't pass down to the child elements, even if they are also containers. Therefore you also need to make the col divs display:flex , as follows:
.col {
flex: 1;
display: flex; /* make this a flex container so it has flex properties */
justify-content: center; /* to horizontally center them in this flex display */
/* REST OF YOUR CSS HERE */
}
Note that you also need to add flex: 1; to the content itself so it doesn't shrink, eg:
.col-item {
flex: 1;
/* REST OF YOUR CSS HERE */
}
Working Example with your code:
.container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; } .col { flex: 1; background: orange; margin: 1px; display: flex; justify-content: center; } .col-item { flex: 1; 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>
solution2
0 2020-09-05 18:43:18
You can use for the inner container the same properties you used in the outer one (display: flex and flex: 1):
.container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; } .col { flex: 1; display: flex; background:orange; margin: 1px; } .col-item { flex: 1; 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.