CODEWITHSUNDEEP
htmlcssflexbox
Geeky
Geeky

Reputation: 7498

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>

Upvotes: 2

Views: 4886

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122047

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>

Upvotes: 3

Related Questions