0

I have 2 columns, left and right. The left column is dynamic, the length of it depends on the content coming from backend. I also have background image which is an svg. I want the background image to have the length of the left child element.

image how it should behave on different occasions

The html structure in a simplified way:

<div className="bg-row">
  <div className="col-1"></div>
  <div className="col-2"></div>
</div>

How to make the parent to match the height of the left child element?

Stark
  • 13
  • 1
  • 3
  • 1
    you can do something like `document.querySelector('.bg-row').style.backgroundSize = document.querySelector('.col-1').getBoundingClientRect().height + 10px(some extra padding))`. You can remove that extra if you want. – Kunal Tanwar Aug 23 '21 at 07:52
  • 1
    What have you tried so far ? – Mihai T Aug 23 '21 at 08:05

0 Answers0