CODEWITHSUNDEEP
htmlcssbootstrap-4frontendheight
jacob_frankovic
jacob_frankovic

Reputation: 332

Height 100% bigger than parent div - bootstrap

I am developing a project in which I use bootstrap's cards. I also have to make it compatible with Chromium 57.xx because of some reasons in the company I work for - that's where it came to problem. I use height: 100% for cards and they are perfectly same height in Chrome, Firefox, Edge, Opera etc. I don't have enough rep to post images so I will post links to images. When I use Chromium, it looks like this:

https://i.epvpimg.com/cUzQdab.png

Although they are equal height, the height is much higher than it supposed to be.

What I want to reach is this: https://i.epvpimg.com/dTKdgab.png

When I disable height 100, a height of parent element looks like this: https://i.epvpimg.com/ppkjaab.png

Any ideas? Thank you.

Upvotes: 0

Views: 936

Answers (1)

jacob_frankovic
jacob_frankovic

Reputation: 332

I fixed it by adding d-flex class to the parend element, removed h-100 class from the child and added flex-fill class to the child. Works perfectly.

Upvotes: 1

Related Questions