flex item with image child doesn't adjust its size properly

Question

I found this post, Flex item with image child doesn't adjust from its original width, which I initial thought had the answer, but it didn't, ... well partially it did, when a set height is used.

What I want and expect to happen here, is that the image matches the text element's height and then adjust its width while keeping its ratio.

This appears to work in Chrome, but not in Edge/IE/Firefox. Haven't been able to test Safari as I don't have an iOS device, so I would appreciate if someone can share how/if it work there.

This doesn't need to be a flexbox solution, though I expect a CSS one, meaning no script.

Edit

The given text's height could be dynamic, and based on its content, so the predefined 200px was simply to give it a height, JSFiddle demo, set height .

JSFiddle demo, content based height

Stack snippet

.container {
  display: inline-flex;
}

.img img {
  height:100%;
}

.text {
  background: lightblue;
}

.text-content {
  width: 200px;
}

<div class="container">
  <div class="img">
    <img src="http://placehold.it/160x90">
  </div>
  <div class="text">
    <div class="text-content">
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
    </div>
  </div>
</div>

Expected result (hard coded)

.container {
  display: inline-flex;
}

.img img {
  height:100%;
  width: 355px;            /*  force correct width  */
}

.text {
  background: lightblue;
}

.text-content {
  width: 200px;
}

<div class="container">
  <div class="img">
    <img src="http://placehold.it/160x90">
  </div>
  <div class="text">
    <div class="text-content">
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
      Some text content<br>
    </div>
  </div>
</div>

To make things worse, a local copy (that I believe reproduces **exactly** your snippet) is failing in Chrome ... — vals, Apr 03 '17 at 20:40
@vals Interesting ... made one local version myself and it worked in my Chrome (ver. 57, 64-bit, on Windows 10 Pro) — Asons, Apr 03 '17 at 20:52
@vals Does this version work for you, locally? ... https://jsfiddle.net/f8hgnr77/ — Asons, Apr 03 '17 at 20:56
Yes, your new fiddle works locally I just can't understand what is going on. I have posted a not-an-aswer to see if someone can spot the reason of this behaviour — vals, Apr 04 '17 at 20:25
@Michael_B Do you have any idea about these issues, both mine and what _vals_ posted? — Asons, Apr 06 '17 at 19:42
Unluckily Oriol is no longer visiting S.O. (And It's a pity) — vals, Apr 07 '17 at 05:53
@LGSon, currently I have nothing more to add to the answers and comments already posted. Well, maybe one thing: The seemingly random behavior of images in flex items and flex containers is pretty annoying. — Michael Benjamin, Apr 29 '17 at 22:31
Thanks for telling me. The sad part is that we still don't have a solution ... — vals, Apr 30 '17 at 18:08
@vals, re: Oriol FYI... https://stackoverflow.com/users/1529630/oriol — Michael Benjamin, Jun 19 '17 at 11:54
@LGSon, in looking at your code sample and fiddle demos, and before I delve into this for you, please note that `height: 100%` on the `img` elements have no parent heights defined. See here for guidance (although I think you already know this): [Working with the CSS `height` property and percentage values](https://stackoverflow.com/a/31728799/3597276) — Michael Benjamin, Aug 19 '17 at 14:07
@Michael_B Thanks, and yes, I know that :) ...will have a look later and let you know — Asons, Aug 19 '17 at 14:21

Tunçel Mert · Answer 1 · 2017-05-04T13:41:38.033

4

You should define the height at the .container level. Following CSS will work for all the browsers you mentioned above:

.container {
    display: inline-flex;
    height: 200px;
}

.img {
    height: 100%;
}
.img img {
    height:100%;
}

.text {
    background: lightblue;
}

.text-content {
    width: 200px;
}

UPDATE

I'll leave the old answer just in case but this seems to work codepen. I've tried with varying number of lines and text sizes.

.container {
  display: inline-flex;
}

.img img {
  height:100%;
}

.text {
  background: lightblue;
}

edited May 04 '17 at 13:41

answered Apr 03 '17 at 13:21

Tunçel Mert

108
5

Thanks, upvoted. Made a minor edit of the question, where the height could be dynamic and based on the content of the text element – Asons Apr 03 '17 at 13:54
@LGSon I've updated the answer, can you please check the codepen? – Tunçel Mert May 04 '17 at 13:42
Just did, if you check in Firefox and Edge, you see it still does not work – Asons May 04 '17 at 14:06

flex item with image child doesn't adjust its size properly

1 Answers1

Linked

Related