Grow/Shrink flex item to fit image

Question

I have a layout with an image on the left and text content on the right. I want an image to have 100% height and I want to keep image aspect ratio. Text content should fill available width.

I tried with flex-box, but an image flex item will not adjust its width to the image size:

.wrap {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.image-container {
  background-color: blue;
  flex: 0 0 auto;
}

img {
  height: 100%;
}

.content-container {
  background-color: green;
  flex: 1 1 0;
  overflow: auto;
}

<div class="wrap">
  <div class="image-container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Kitten_in_Rizal_Park%2C_Manila.jpg/230px-Kitten_in_Rizal_Park%2C_Manila.jpg" />
  </div>
  <div class="content-container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae interdum nunc. In nec semper lectus. Nunc et nisi mi. Integer lobortis lobortis fermentum. Pellentesque egestas, turpis eget rhoncus feugiat, massa elit euismod eros, et venenatis libero ex sed ipsum. Cras ut nisi eget erat hendrerit porttitor. Pellentesque mi elit, fringilla vel nulla eget, consequat iaculis ante. Maecenas rhoncus ante nec augue maximus tristique ac ut massa. Suspendisse sit amet mi nunc. Integer commodo nulla non sapien volutpat, non faucibus nunc scelerisque. Nullam nec venenatis ligula. Etiam ac molestie magna, et dictum nibh.
  </div>
</div>

How to grow/shrink image-container flex item to fit image size?

Check this post: [flex-item-with-image-child-doesnt-adjust-its-size-properly](https://stackoverflow.com/questions/43185407/flex-item-with-image-child-doesnt-adjust-its-size-properly) — Asons, Jun 07 '17 at 19:33
I haven't seen that before... I quickly tried that, but still no luck - am I doing it right? https://jsfiddle.net/oneovsy0/1/ — Lierizou, Jun 07 '17 at 20:27
If you resize your fiddle vertically, you'll see it doesn't adjust. Either text covers the image, when higher, or create a space between them, when lower. I've been looking for a CSS solution for some time now, and still nothing that works cross browser — Asons, Jun 07 '17 at 20:31
Could you try this one? https://jsfiddle.net/oneovsy0/2/ Looks like working one. — Lierizou, Jun 07 '17 at 20:40
Well, there you have it. Doesn't solve the one I linked (it has a slightly different requirement) ... post it as a self answer and you'll have my upvote — Asons, Jun 07 '17 at 20:49
It was suggested by Johannes - marked as accepted answer. Thanks for help! — Lierizou, Jun 07 '17 at 21:00
In general, that is the best way to do it, but in this case I disagree. If a user copy the accepted answer as is, it will only work on Firefox, and as most user does that, they will get really confused why it doesn't work. Comments is not persistent and can be deleted, and without them, there will be no info what so ever, showing what you did to make it work cross browser, so therefore I suggest you either post the solution as a self answer (but keep the accept), or tell the accepted answers poster to update their answer — Asons, Jun 07 '17 at 22:57

Johannes · Accepted Answer · 2017-06-07T19:43:11.823

One way to do it is to simply erase the DIV around the image (you won't see the background anyway, if it works the way you want), which makes the image itself a flex-item, and leave that at the default settings:

.wrap {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}


img {
  height: 100%;
  width: auto;
}

.content-container {
  background-color: green;
  overflow: auto;
}

<div class="wrap">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Kitten_in_Rizal_Park%2C_Manila.jpg/230px-Kitten_in_Rizal_Park%2C_Manila.jpg" />
  <div class="content-container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae interdum nunc. In nec semper lectus. Nunc et nisi mi. Integer lobortis lobortis fermentum. Pellentesque egestas, turpis eget rhoncus feugiat, massa elit euismod eros, et venenatis libero ex sed ipsum. Cras ut nisi eget erat hendrerit porttitor. Pellentesque mi elit, fringilla vel nulla eget, consequat iaculis ante. Maecenas rhoncus ante nec augue maximus tristique ac ut massa. Suspendisse sit amet mi nunc. Integer commodo nulla non sapien volutpat, non faucibus nunc scelerisque. Nullam nec venenatis ligula. Etiam ac molestie magna, et dictum nibh.
  </div>
</div>

Have you checked that in full screen? ...the image loses its aspect ratio — Asons, Jun 07 '17 at 19:36
@LGSon No, it doesn't, at least not here on Firefox Mac. It only becomes blurry since it's much smaller that fullscreen. — Johannes, Jun 07 '17 at 19:38
If you check this, [flex-item-with-image-child-doesnt-adjust-its-size-properly](https://stackoverflow.com/questions/43185407/flex-item-with-image-child-doesnt-adjust-its-size-properly), ... and your solution doesn't work on Chrome/Edge, the image stretches ... but FF gets it right — Asons, Jun 07 '17 at 19:39
Let me make a few more tests - looks great so far. That's probably the best answer. — Lierizou, Jun 07 '17 at 20:42

Grow/Shrink flex item to fit image

1 Answers1

Linked