User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0 Build ID: 20141126041045 Steps to reproduce: I have a flex container (with default props) and two flex children. One of the children has a flexible image (max-width: 100%) inside it with an original width of 1000px Actual results: The flexible image displays in full size (and not based on its parent's width), causing layout breaks. Notice that this problem arised only after updating Firefox to version 34. Expected results: The width of the image should be equal to 100% of its parent's width, up to its full original size. So, if its parent's width is less then 1000px, image size should be adjusted

Attached is a zip file containing a HTML example page + image and CSS

I agree this is annoying, but this is an expected result of a spec-change -- adding some special "min-width:auto" behavior for flex items. Hence, resolving as INVALID, since we're following the spec. To disable this behavior (and fix the issue), just "min-width: 0" to the <img>'s flex-item ancestor -- <main> in your testcase. Basically, the reason things are huge is: - the flex item has "min-width:auto" by default, which (for flex items) means the min-content size - We ask the children what their sizes are. The image doesn't have anything to resolve its percent max-width against yet (because we don't know how big its chain of ancestors will be yet), so it tells us its intrinsic size. - This gets incorporated into the flex item's minimum size (due to how "min-width:auto" works), and the flex item refuses to shrink below that size.

(This is effectively the same issue as bug 1100085, BTW. See my comments there for more info.)

(In reply to Daniel Holbert [:dholbert] from comment #2) > I agree this is annoying, but this is an expected result of a spec-change -- > adding some special "min-width:auto" behavior for flex items. Hence, > resolving as INVALID, since we're following the spec. > > To disable this behavior (and fix the issue), just "min-width: 0" to the > <img>'s flex-item ancestor -- <main> in your testcase. > > Basically, the reason things are huge is: > - the flex item has "min-width:auto" by default, which (for flex items) > means the min-content size > - We ask the children what their sizes are. The image doesn't have anything > to resolve its percent max-width against yet (because we don't know how big > its chain of ancestors will be yet), so it tells us its intrinsic size. > - This gets incorporated into the flex item's minimum size (due to how > "min-width:auto" works), and the flex item refuses to shrink below that size. Hi, Daniel Thanks a lot! It corrects the behavior as expected. (I've searched for a related bug, but I couldn't find any) While I understand that it follows the specs, it is such a delicate detail! I'll try to spread the info.