So I got back from work and extracted the bug to a codepen: http://codepen.io/Spreadyy/pen/YWQAQO
Also means that the link above may change at any time that project is currently still in progress.

I added a second case to the codepen:
-(on the left side) if the flex-basis is set chrome doesn't scale the images at all
-(on the right side) if the max-width is set additionally chrome scales the width of the images but keeps the height

Verified the issue on Latest Chrome Stable# 51.0.2704.106 and Latest Canary# 54.0.2787.0 on Windows, Mac and Linux and could reproduce the issue.
This is a Non-Regression issue seen from Chrome Build# 30.0.1599.101 (Official Build 227552).
Changing the status to Untriaged so that the issue could get addressed.
Thank you.

The underlying problem is that we don't really handle flex-basis on <img> (or any other replaced element with an aspect ratio) correctly. As a workaround, try setting width instead.

This may be a duplicate of  bug 531199  but I'll keep this open for now.

(sidenote, setting min-width: 0 makes the left side look like the right side -- a side effect of not taking the flex-basis into account, here for the min-content width)

This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available. If you change it back, also remove the "Hotlist-Recharge-Cold" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Bug can still be reproduced at https://codepen.io/sandrosc/pen/YWQAQO.

Marking as available again.

I increasingly think that for aspect ratio elements, Flexbox just needs to do the entire calculation itself instead of leaving parts of it to the element in question.

So I found out that Untriaged means that the issue should be assigned to someone. If that is indeed the case we should change the status back so it gets assigned.

This happens even if there's no flex-property on the image itself.

How to replicate:
Make a div with a fixed width or height and display: flex.
Put an image inside that div with either width or height (https://codepen.io/anon/pen/MEmqjd) or both (https://codepen.io/anon/pen/dVWjwY) set to auto.

Expected behavior:
Chrome should respect parent container size.

Behavior:
It doesn't.

Workaround:
Replacing any occurrence of auto with 100% makes Chrome behave like Firefox.

I just hit what I believe is this bug. (I develop in Firefox and only tested it on IE11 and Edge, presuming Chrome to be OK, so it went to production and was only pointed out by someone a few days later.) It’d be nice to get some attention on this, as it’s been known about for at least a couple of years and has affected multiple people.

Here’s my minimal test case, which may incidentally make the matter a bit clearer:

    <div style="display:flex">
        <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Ccircle%20cx='100'%20cy='100'%20r='100'/%3E%3C/svg%3E"
             width="100" height="100" style="height:auto">
    </div>

The image is 200×200 (here an inline SVG data: URI for convenience), and the image tag has width and height attributes which make it 100×100; but when height:auto is specified, it jumps up to 200, rather than respecting the aspect ratio and staying at 100 as it should. Thus the 1:1 circle becomes a 1:2 ellipse.

In this minimal case at least, this only affects horizontal flex; `flex-direction: column` on the div “fixes” it.

I have a different test case with the same aspect ratio bug.

The interesting part is that if you do this change in *inspector*:
Add to .image: display: block;
or
Remove from .element: align-items: center;
Then it fixes the issue, *but* if you revert the changes it won't go back to previous state.
Also if you make those changes in file then it won't fix the issue in the first place.

Deleted: bug.html 2.3 KB

bug.html 2.3 KB View Download

 Issue 531199  has been merged into this issue.

I've tested https://codepen.io/sandrosc/pen/YWQAQO in Chrome, Edge, Firefox and Safari. Chrome and Safari are very similar, with an odd aspect ration of the right image. Edge and Firefox both preserve the aspect ratio, but the leftmost image is scaled differently. Unfortunately I can't get screenshots to work in BrowserStack so I can't upload the images :/

Adding Hotlist-Interop because the behavior is so different cross-browser.