Как мне установить родительскую высоту div на основе роста самого высокого ребенка?

Question

У меня есть строка и два столбца (один столбец будет гибким для этого примера). Я хотел бы установить высоту строки равной высоте самого высокого дочернего элемента. У меня проблемы с этим без явной установки высоты строки.

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

Как сделать высоту родительского div (.row) высотой самого высокого дочернего div (изображение в примере выше)?

Любая помощь приветствуется,

Спасибо

p.s. Я видел этот ресурс столбцы равной высоты в CSS , но наверняка должен быть более простой способ?

Answer 1

Используйте display:flex в строке. если передать flex родительскому элементу, нет необходимости передавать свойство float дочернему элементу.

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

Answer 2

Добавить стиль display: flex; в div с строкой класса