Question

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?

Answer 1

在带有类行

的div上添加样式display: flex;

Answer 2

在行中使用display:flex。如果给父母赋予flex，则不需要给孩子提供浮动属性。

.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>

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

2 个答案: