Image does not respect parent flex size

user_9318409 0
Viewed 398

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 class="carousel">
    <div class="carousel__image-container">
        <img class="carousel__image"
             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 class="carousel__description">
      Lorem ipsum dolor sit amet, consectetur.
    </div>
</div>

flexbox css image html
2 Answers

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

user_175771460

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 class="carousel__image-container">

You can also try:

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

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