I seem to be facing an issue with this problem.
My goal is to ensure that all the child divs within a flex container have the same height as the tallest child div, which in this case is 100px. Additionally, I want them to be aligned at the center.
I've attempted using flex:1 and align:stretch but neither seems to be working for me. Any guidance on how to achieve this would be greatly appreciated.
.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>