1

I have two divs, A and B inside a wrapper.

<div>
    <div id="A">
    </div>

    <div id="B">
    </div>
</div>

Div A has less content inside it than div B, so it is always shorter in height. I want div B to shrink down to the size of div A and hide its excess content behind a scroll bar. Div A is usually on the order of hundreds of pixels high, but div B is on the order of thousands of pixels high, so I cant grow A to be the size of B, I need to shrink B.

This would be trivial if the size of A was static, but the problem is that A can be any size.

All other solutions to the problem of creating two equal sized divs involve growing div A to be equal to the size of div B - such as the simple display: flex, flex:1 solution. This is not what I want.

Im trying to do this in CSS. I could use javascript to set the size of div B, but the size of div A changes often with data loading in and out so I can't just set the size of div B once when the page loads and call it good.

fourseventy
  • 43
  • 3
  • How's the width of those elements is defined ? Are they equal width ? one is 2 3 4 times wider ? or what exactly ? – Rainbow May 13 '20 at 22:22
  • 1
    let me know if the duplicate is suitable. It should be if I understood the question right. – Temani Afif May 13 '20 at 23:02
  • You are a life saver. The marked duplicate is exactly what I was looking for. Sorry for the dupe question, I searched for a long time and couldn't find anything. – fourseventy May 14 '20 at 18:25

0 Answers0