如何使弹性容器中的所有子代都具有相同的高度

Question

I am stuck with this problem.

I am trying to make all the child divs within a flex container to have the same height as the tallest child div,here it is 100px and i want them to be aligned center

not sure how can i do it. I tried flex:1 did not work, i tried doing align:stretch too but does not seem to work.

can some one please help on this.

 .container { display: flex; flex-direction: row; border: 1px solid black; width: 500px; align-items: center; height:160px; } .container div:not(:first-child) { background: green; margin-top: 20px; margin-left: 20px; } .container div:first-child { height: 100px; background: red; margin-top: 20px; margin-left: 20px; text-align: center; } 

 <div class="container"> <div> item-1 </div> <div> item-2 </div> <div> item-3 </div> </div> 

Answer 1

To do this you just need to wrap your inner div 's in another div and set align-items: center on container element.

 .container { display: flex; border: 1px solid black; align-items: center; width: 500px; height: 150px; } div > div { display: flex; } .container div div:not(:first-child) { background: green; margin-left: 20px; } .container div div:first-child { height: 100px; background: red; margin-left: 20px; text-align: center; } 

 <div class="container"> <div> <div> item-1 </div> <div> item-2 </div> <div> item-3 </div> </div> </div>