How to adjust height of a div with respect to another div?

Question

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;
}

score 1 · Answer 1 · answered Nov 12 '21 at 15:49

CSS Flexible Box Layout

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

Diwyansh · Answer 2 · 2021-11-12T16:46:23.710

1

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>

edited Nov 12 '21 at 16:46

answered Nov 12 '21 at 15:51

Diwyansh

2,961
1
7
11

yes it was mistakenly left there – Diwyansh Nov 12 '21 at 16:46

score 0 · Accepted Answer · answered Nov 12 '21 at 15:56

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.

How to adjust height of a div with respect to another div?

3 Answers3