Image height as parent div height

Question

I have flexbox with few elemenets, for example paragraph and image. I would like to ignore image height when flexbox height is calculated. I want to image height be equal to max height of others elemenets in div

 div{ display: flex; background-color: pink; } p{ width: 200px; } img{ max-height: 100%; }

 <div> <img src="https://dummyimage.com/300.png/"/> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p> </div>

Answer 1

You can add the image as a background instead of inline the only downside might be that you will have to give it a defined width but if this is not a problem in your case I would recommend doing it like this.

 div{ display: flex; background-color: pink; }.image-wrapper { background-image: url('https://dummyimage.com/300.png/'); width: 200px; background-position: center; background-size: contain; } p{ width: 200px; } img{ max-height: 100%; }

 <div> <div class="image-wrapper"> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p> </div>

Answer 2

Try

img{
display: flex
  max-height: 100%;
}