947820 - [CSS3-flex]Flex item itself as a flex container picture overflow

Status: NEW

(Core :: Layout, defect, P4)

Description

[yiorsi]

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

Comment 1

[yiorsi]

Attachment: screenshot in Firefox 28

Comment 2

[yiorsi]

Attachment: screenshot in Chrome 30 and Opera 12.1

Comment 3

[yiorsi]

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。

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: (image used in testcase)

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: reporter's testcase

Comment 6

[yiorsi]

(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?

Comment 7

[Daniel Holbert [:dholbert]]

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.)

Comment 8

[yiorsi]

@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.