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

NEW
Unassigned

Status

()

Core
Layout
P4
normal
4 years ago
4 years ago

People

(Reporter: yiorsi, Unassigned)

Tracking

({testcase})

28 Branch
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(4 attachments)

(Reporter)

Description

4 years ago
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
(Reporter)

Updated

4 years ago
Summary: http://jsbin.com/OgaCaZiJ/2/edit → [CSS3-flex]Flex item itself as a flex container picture overflow
(Reporter)

Comment 1

4 years ago
Created attachment 8344506 [details]
screenshot in Firefox 28
(Reporter)

Comment 2

4 years ago
Created attachment 8344509 [details]
screenshot in Chrome 30 and Opera 12.1
(Reporter)

Comment 3

4 years ago
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。

Updated

4 years ago
Component: Untriaged → Layout
Depends on: 666041
Product: Firefox → Core
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

Updated

4 years ago
Keywords: testcase
OS: Windows 7 → All
Priority: -- → P4
Hardware: x86 → All
(Reporter)

Comment 6

4 years ago
(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
(Reporter)

Comment 8

4 years ago
@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.