I have two divs on left and right. Second div contains lots of dynamic data, so height cannot be fixed. Then, how to make first div's height same as second div?
<div style="width: 100%;">
<div class="first">
Left Div
</div>
<div class="second">
<h5> hello </h5>
<h5> hello </h5>
<h5> hello </h5>
</div>
</div>
.first{
width: 50%;
float: left;
background: yellow;
}
.second{
margin-left: 50%;
background: grey;
}
.d-flex {
display: flex;
}
.first, .second {
flex: 1 1 auto;
}
.first {
background-color: yellow;
}
.second {
background-color: grey;
}<div class="d-flex">
<div class="first">
Left Div
</div>
<div class="second">
<h5> hello </h5>
<h5> hello </h5>
<h5> hello </h5>
</div>
</div>You just need to apply flex property to your divs
.first {
flex: 1;
background: yellow;
}
.second {
flex: 1;
background: grey;
}<div style="width: 100%;display:flex;">
<div class="first">Left Div </div>
<div class="second">
<h5> hello </h5>
<h5> hello </h5>
<h5> hello </h5>
</div>
</div>The hard way is by using JavaScript. Try something like:
document.querySelector('.first').style.height = document.querySelector('.second').clientHeight + 'px';
The problem with this code is that you need to apply it every time the screen resized.
Second solution is by using "flex" instead of "float"
.first {
width: 50%;
background: yellow;
}
.second {
width: 50%;
background: grey;
}
.parent {
display: flex;
}<div class="parent" style="width: 100%;">
<div class="first">
Left Div
</div>
<div class="second">
<h5> hello </h5>
<h5> hello </h5>
<h5> hello </h5>
</div>
</div>Or using "flex" instead of width.