Why do flex-item images not scale height? - css

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. :/

Answer 1

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 =/

Answer 2

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>