I've encountered a problem while working with the bootstrap grid system (Version v4.5.2). I have set a max-height of 50vh on a container-fluid, which is working fine. However, when I add a row with 2 columns to the container, the images within the row do not resize properly. The row ends up exceeding the max-height of its parent container and adjusts to the image height.
Even after trying to use the "img-fluid" class, the images still do not resize as expected. I have provided links to the dev-tool images for reference.
Here is the parent container-fluid image
And here is the child-row that exceeds the container's max-height
I am confused about where I might be going wrong. Below is the code I am working with:
HTML
<div class="container-fluid view ">
<div class="row h-100 d-flex align-items-center no-gutters">
<div class="col-md-6 pl-5">
<h1>Just a simple Heading that should align in the middle</h1>
</div>
<div class="col-md-6 d-flex align-items-center img-fluid flex-nowrap overflow-hidden heroImages">
<img class="img-fluid" src="https://picsum.photos/600">
<img src="https://picsum.photos/600">
</div>
</div>
CSS
html,header{
height: 100%!important;
width: 100% !important;
margin-top: 0 !important;
padding: 0 !important;
color:black;
}
.view {
max-height: 300px;
/* max-height: 50vh; */
}
body {
height: 100% !important;
padding-top: 55px !important;
background-color: rgba(255, 255, 255, 0.84) !important;
}