Fitting ng-bootstrap carousel on div inside ng-bootstrap modal

Question

i've been trying to properly set the css properties to have a ng-bootstrap carousel image fit into a given space (div) inside a custom ng-bootstrap modal. Watch this forked stackblitz code.

As seen in the sample source, the image overlaps the given space (height) of the modal as well as the col-8 where it is placed.

How do i make carousel follow the size of its parent col-8 ? so as to not overlap with modal size.

UPDATE

For those who can't see the issue, you can visit the actual app here

After some trial and error, i've come to this point. Only carousel-inner and its children does not follow its parent div which is ngb-carousel.carousel-modal . See this image below

As shown in the image above, i can't make carousel-inner follow the size of its parent ngb-carousel.carousel-modal which already follow the modal height. it always overlaps and extends over the carousel-modal height. Do note that i set them to max-height:100% to make it responsive.

Answer 1

Give the image a fixed height within the container (that has a fixed height too). Then position the carousel caption accordingly, like so:

img {
    height: 650px; /*adjust for your project*/
    width: auto !important;
}

@media only screen and (max-width:767px){
  img { width: 100% !important
   }    
} 

.carousel-caption {
    position: absolute;
    bottom: 20px;
    left: 3%; /*adjust for your project*/
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    max-width: 50%; /*adjust for your project*/
}

Play around with the values til it fits your needs.

Answer 2

Basically you just need to bring height 100% down the hierarchy of tags.

To set the modal-body height I set 100% - Modal Header Height (69px).

 .modal-body { height: Calc(100% - 69px); } ngbd-modal-content, ngb-carousel, .carousel-inner, .modal-body .row { height:100%; } 

Stackblitz: https://stackblitz.com/edit/angular-csyyp8-heb7xf?file=styles.css

Answer 3

After hours of understanding height , max-height and its relation to its parent tag. I've came up with the fix. see updated stackblitz here.

Basically, i made the image resize to fit in parent content giving the parent content as well as the img a fix height. Therefore, it will make the image auto resize to fit its parent div.