Why do flex-item images not scale height?

Question

I'm learning Flexbox layout right now after having to take over a project after someone abandoned it and have run into a bug where flex-item images don't seem to scale their height at all w/ responsive design. Width scales fine, but the height never scales and remains fixed at original height.

I have a very simple set up of something like:

<div class="my-container">
  <img src="..." />
  <img src="..." />
  <img src="..." />
</div>

CSS is very basic:

.my-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

.my-container img {
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  max-width: 100%;
}

Basically, a single column (the mobile view - iphone). The above works and looks great in Firefox. On Chrome (v 48.0) the image height is NOT scaling.

E.g. the 1st <img> is a 940px x 500px wide image which looks great on Desktop, but in Chrome it is 300px x 500px. Width is scaling but height is not? The 2nd and 3rd images ~460px and appear on a row next to each other.

Oddly, if I make flex-direction: row, then Chrome renders correctly and the image height appears to scale, but Firefox then breaks and has the same issue!

Am I out to lunch here?

Thankfully, everything RENDERS OKAY on mobile devices. This only seems to occur when resizing your browser window. :/

Can you post the full code (and/or a demo) so we could see what's going on? Thanks. — Michael Benjamin, Feb 02 '16 at 00:20
Can you shrink your browser and look at this in Chrome (v.48) ? The top map image is not scaling height at all: http://codepen.io/anon/pen/PZBWMB — skålfyfan, Feb 02 '16 at 00:46
@Trix All the same height? No. We want them to scale the height properly relative to their width. The height should NOT be remaining fixed. — skålfyfan, Feb 02 '16 at 14:28
I think Chrome 48 now shares an issue that already exists in FF. This was not an issue in Chrome 47. So, try the FF solution: http://stackoverflow.com/q/34982834/3597276 — Michael Benjamin, Feb 03 '16 at 12:14

Mike T · Accepted Answer · 2016-02-02T20:51:54.487

I believe this is a bug with the most recent production chrome (48). Does running this in console "resolve" your issue (assuming you have jquery running): $('img').css('min-height',0);

If so (or alternatively) you should be able to give your images a min-height of 0 in css. That should do the trick as a workaround until it's fixed.

Found this on: https://github.com/angular/material/issues/6841

Chrome is a great browser, but occasionally the flex-box support breaks with updates =/

score 0 · Answer 2 · answered Feb 02 '16 at 15:46

Is this the desired output?

.container {
  width: 600px;
  margin: 10px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

<div class="container">
  <div><img src="https://placehold.it/150x150/E8117F/FFFFFF"></div>
  <div><img src="https://placehold.it/100x100/11E87F/000000"></div>
  <div><img src="https://placehold.it/200x300/117FE8/FFFFFF"></div>
</div>

Why do flex-item images not scale height?

2 Answers2