Div height on the basis of the other div height

Question

I am trying to add a div whose height depends on the length of another div.

For example a DIV A have some content and DIV B contains content representing the feedback for DIV. If the DIV B has more content than the length DIV A should be shown as scrollable instead of expanding its height.

<div class="A col-md-9">
content
</div>
<div class="B col-md-3">
feedback content
</div>

Can you show a working example of your problem? – Ricardo Sanchez Aug 02 '21 at 06:43 — Ricardo Sanchez, Aug 02 '21 at 06:43
Maybe `
`? (for the 2nd div as well)
– AbsoluteBeginner Aug 02 '21 at 06:44 — AbsoluteBeginner, Aug 02 '21 at 06:44

score 0 · Answer 1 · answered Aug 02 '21 at 07:10

You can achieve it through CSS flex. You can read more on https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Also, you should add these A col-md-9 inside a class like this <div class="A col-md-9">, for now I have restructured the code.

.parent {
display: flex;
}
.A, .B {
border: 1px solid #ccc;
}

<div class="parent">
  <div class="A col-md-9">
  content<br>More Content<br> And more content...
  </div>
  <div class="B col-md-9">
  feedback content
  </div>
</div>

danial hadi · Answer 2 · 2021-08-02T10:03:21.523

you must set the same height for both div then make overflow: auto and add another div inside them

<div class="A col-md-9">
    <div>
        content
    </div>
</div>
<div class="B col-md-3">
    <div>
        feedback content
    </div>
</div>

css:

.A {
    height: 50px;
    overflow: auto;
}

.B {
    height: 50px;
    overflow: auto;
}

Update: if you want to have height based on A div you need to get A div height first and set that height to B div

const height = document.getElementsByClassName('A')[0].offsetHeight;
document.getElementsByClassName('B')[0].style.height = height + 'px';

and then you do not need to add height in A and B class

.A, .B {
    overflow: auto;
}

know you set height on B div base on A div content if B div has more content it shows in scroll view mode and instead of expanding its height.

this works for me

Div height on the basis of the other div height

2 Answers2