Image ovefllowing a flex item-CodePudding

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

CodePudding user response：

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;
    }
  }