Как установить высоту родительского div на основе высоты самого высокого ребенка?
У меня есть строка и два столбца (в этом примере один столбец будет гибким). Я хотел бы установить высоту строки как высоту самого высокого дочернего элемента. У меня проблемы с этим без явной установки высоты строки.
.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, но наверняка должен быть способ попроще?
Ответы 2
Добавить стиль display: flex; в div со строкой класса
Используйте 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>Да это не сложно :)
Если эти ответы помогут вам, вы можете принять и проголосовать, чтобы помочь другим решить аналогичную проблему. :)
И если вы хотите, чтобы ширина дочернего элемента составляла 50% 50%, вы можете просто дать flex-grow: 1 для гибкого дочернего элемента.
Спасибо! Я рад, что спросил, это было не так сложно, как я думал.