'How to set div height 100% of parent height?

I need that button that would always stick to the bottom no matter how much content will be on the card. And bootstrap class mt-auto to button does that, but when I set height to all div's 100 %, my row in card body overflows from lg breakpoint when columns have class col-12. What I am missing here? Why does it overflow, why height isn't set 100% of the parent's div?

Code example with demo is here:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mx-0 gy-4">
    <div class="col-12 d-flex col-md-6">
        <div class="card bg-info">
            <div class="card-body h-100 position-relative">
                <div class="row mx-0 h-100">
                    <div class="px-0 col-12 col-lg-6 mb-3 text-center" style="height: 200px">
                        <img class="img-fluid" src="https://placekitten.com/250/462" style="height: 100%"/>
                    </div>
                    <div class="col-12 px-0 d-flex flex-column col-lg-6 h-100">
                        <p>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </p>
                        <button class="btn btn-primary w-auto mt-auto">Watch more</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
      <div class="col-12 d-flex col-md-6">
        <div class="card bg-info">
            <div class="card-body h-100 position-relative">
                <div class="row mx-0 h-100">
                    <div class="px-0 col-12 col-lg-6 mb-3 text-center" style="height: 200px">
                        <img class="img-fluid" src="https://placekitten.com/250/462" style="height: 100%"/>
                    </div>
                    <div class="col-12 px-0 d-flex flex-column col-lg-6 h-100">
                        <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </p>
                        <button class="btn btn-primary w-auto mt-auto">Watch more</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
htmlcssstylesheightbootstrap-5


Solution 1:[1]

As you've used flex for the row you could try using flex-grow: 1 for each card element (iirc the bootstrap class for this is just flex-grow). Then you just need to set a max-height on the top level row div.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sam St Aubyn

Related Questions