User Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36 Steps to reproduce: 1.img parent element that is flex-item is flex-container. 2.img parent element set margin: auto. Actual results: Img overflow Expected results: Img geometric scaling
Summary: http://jsbin.com/OgaCaZiJ/2/edit → [CSS3-flex]Flex item itself as a flex container picture overflow
When there are the following factors exist, img set max-width: 100% does not scale the image, an overflow occurs. 1.img parent element that is flex-item is flex-container. 2.img parent element set margin: auto. Solution reference Demo 2,3,4. Demo: http://jsbin.com/OgaCaZiJ/2/edit （Chinese version） Flex item 本身作为 flex container 时图片溢出 当存在以下因素同时存在时，img设置max-width:100%不能缩放图片，发生溢出。 1.img的父元素即是flex-item又是 flex-container 。 2.img的父元素设置 margin:auto。 解决办法参照 Demo 2,3,4。
Attachment #8344506 - Attachment description: Firefox 28 test → screenshot in Firefox 28
Attachment #8344509 - Attachment description: Chrome 30 and Opera 12.1 test → screenshot in Chrome 30 and Opera 12.1
OS: Windows 7 → All
Priority: -- → P4
Hardware: x86 → All
(In reply to Daniel Holbert [:dholbert] from comment #5) > Created attachment 8344738 [details] > reporter's testcase Daniel Holbert, intends to begin to fix this bug yet?
I would like to fix it, though I haven't begun working on it yet - I've got a few higher-priority bugs I'm working on currently. (But basically, I believe the underlying bug is that we don't really pay attention to intrinsic aspect ratios during flex layout, but we need to in order to handle images as flex items correctly.)
Status: UNCONFIRMED → NEW
Ever confirmed: true
@Daniel Holbert Obviously, flex layout in the future will be heavily used in page layout, especially in the mobile terminal, because a long time ago to support the "display: *-box". But Firefox has not supported multi-line flexbox layout, until a few days before finally support, thank you very much Daniel Holbert efforts, I am excited to be crying. I think that not enough attention Firefox Flex has hindered the development and use of standardized, hoping to fully test flex. Test Suite: http://test.csswg.org/suites/css3-flexbox/nightly-unstable/ Once again, thanks to Daniel Holbert all pay.
You need to log in before you can comment on or make changes to this bug.