Image ovefllowing a flex item

Question

I'm working on a flex box layout of 3 columns. The left/right columns are for text and the middle column is for an image. I would like to understand why the image overflows or forces the height of the middle column to increase. The middle flex item is set to flex:0 0 60%;. From my understanding this tells it to not shrink or grow and have a basis of 60% of the flex container's width. For demo purposes i have made a CodePen also i am using a 2400x2400 image to show the issue with very large images

This question's may help you https://stackoverflow.com/questions/4394309/how-do-i-fit-an-image-img-inside-a-div-and-keep-the-aspect-ratio — Danielprabhakaran N, Oct 20 '21 at 18:07

score 2 · Accepted Answer · answered Oct 20 '21 at 18:06

2

You forgot to explicitly cpecify height of the parent element:

  .prod-detail__image-wrapper{
    flex:0 0 60%;
    height:100%; /* HERE */
    & img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

answered Oct 20 '21 at 18:06

Kosh

16,966
2
19
34

Image ovefllowing a flex item

1 Answers1