prevent resizing of parent by child - reactjs

Question

I allow myself to post my problem because I can't find a solution and I'm starting to pull my hair out.
I would like to make my second column the same height as my first column.
Concern is that since the content is larger than the initial size, it enlarges the parent div and therefore increases the content of the page.
I specify that I use Boostrap 5
My code:
<div className="row g-2">
<div className="col-md-5">
<div className='border border-primary border-4 bg-secondary' style={{ height: 400 + "px" }}></div>
</div>
<div className="col-md-7">
<div className='border border-primary border-4 bg-dark p-2 h-100 overflow-auto'>
<div className="bg-danger" style={{ height: 800 + "px" }}>
<span className="text-white fs-1">Hello World </span>
</div>
</div>
</div>
</div>
The problem in question
Here is what I want

Answer 1

Adding fixed height to parent element can be a solution. Also don't forget overflow class to parent.
<div className="row g-2 overflow-hidden" style={{ height: '400px' }}>
<div className="col-md-5">
<div
className="border border-primary border-4 bg-secondary"
style={{ height: 400 + 'px' }}
></div>
</div>
<div className="col-md-7">
<div className="border border-primary border-4 bg-dark p-2 h-100 overflow-auto">
<div className="bg-danger" style={{ height: 800 + 'px' }}>
<span className="text-white fs-1">Hello World </span>
</div>
</div>
</div>
</div>
Update:
What I'm really looking for is that column two is the same height as column one (its height will be automatic with the content).
You can achieve this by making second column relative and its child absolute. Also add top, bottom, left and right to 0
<div className="row g-2">
<div className="col-md-5">
<div
className="border border-primary border-4 bg-secondary"
style={{ height: 400 + 'px' }}
></div>
</div>
<div className="col-md-7 position-relative">
<div className="border position-absolute top-0 start-0 end-0 bottom-0 border-primary border-4 bg-dark p-2 h-100 overflow-auto">
<div className="bg-danger" style={{ height: 800 + 'px' }}>
<span className="text-white fs-1">Hello World </span>
</div>
</div>
</div>
</div>