Geeky Geeky - 28 days ago 15
CSS Question

How to make all children in a flex-container to have the same height

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

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>