prevent resizing of parent by child

Antox 0
Viewed 17

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

bootstrap-5 responsive reactjs
1 Answers

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>
Amjed Ali0
Related