CODEWITHSUNDEEP
htmlcsssassflexbox
Joel Hoelting
Joel Hoelting

Reputation: 1992

How do I set parent div height based on height of tallest child?

I have a row and two columns (one column will be flex for this example). I would like to set the height of the row to be the height of the tallest child element. I am having trouble doing this without explicitly setting the height of the row. 

.row {
  background: yellow;
}

.column1 {
  float: left;
  width: 50%;
}
.column2 {
  float: left;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: aqua;
}

img {
  width: 100%;
}
<div class="row">
  <div class="column1">
    <img src="https://hypb.imgix.net/image/2017/12/kith-spongebob-squarepants-teaser-1.jpg?q=75&w=800&fit=max&auto=compress%2Cformat">
  </div>
  <div class="column2">
    <p>This column should match the height of the other column</p>
  </div>
</div>

How do I make height of the parent div(.row) the height of the tallest child div (an image in the above example)?

Any help appreciated,

Thanks

p.s. I saw this resource equal height columns in css but surely there must be a simpler way?

Upvotes: 2

Views: 1670

Answers (2)

patelarpan
patelarpan

Reputation: 7991

Use display:flex in row. if give flex to parent then there is no need to give float property to child.

.row {
  background: yellow;
  display: flex;
}

.column1 {

  width: 50%;
}
.column2 {

  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: aqua;
}

img {
  width: 100%;
}
<div class="row">
  <div class="column1">
    <img src="https://hypb.imgix.net/image/2017/12/kith-spongebob-squarepants-teaser-1.jpg?q=75&w=800&fit=max&auto=compress%2Cformat">
  </div>
  <div class="column2">
    <p>This column should match the height of the other column</p>
  </div>
</div>

Upvotes: 1

Nandita Sharma
Nandita Sharma

Reputation: 13407

Add style display: flex; on the div with class row

Upvotes: 0

Related Questions