I have been scratching my head for quite some time now trying to make this image respect its parent flex size.

The scenario is, I want to build a component that would have a height of 150px. This component will have a column flex display of two sections: an image and its description. I wanted each child to have 1/2 (flex: 1) of their parent's height. However, the image doesn't respect its flex size! It pushes its sibling down.

I've noticed that if I apply the flex: 1 to the image itself this doesn't happen, but I'd like to understand why this image is not respecting its parent flex: 1 (which should be around 67.5px)

Thank you!

* {
  box-sizing: border-box;
}

.carousel {
  width: 150px;
  height: 150px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 1rem;
  outline: 1px solid black;
}

.carousel__image-container {
  outline: 1px solid red;
  flex: 1;
}

.carousel__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.carousel__description {
  flex: 1;
  display: flex;
  gap: .5rem;
}

<div >
    <div >
        <img 
             src="https://images.unsplash.com/photo-1614006160288-14eba44816d6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
             alt="Little Cato"
        />
    </div>
    <div >
      Lorem ipsum dolor sit amet, consectetur.
    </div>
</div>

CodePudding user response：

is not use flex: 1. The size of the image depends on the width and height settings of the image

CodePudding user response：

Flex is not actually the problem. Your image has an aspect-ratio of 3:2, which means that it's impossible to have 150x67.5 with no distortions or changes in it shape, that's why it is push it's sibling down.

If you really want to set your image as 50% of it's parent height, you should set height: 50% to your <div >

You can also try:

.carousel__image-container {
   outline: 1px solid red;
   height: 50%;
   width: 100%;
}

.carousel__image {
   width: 100%;
   height: 100%;
}