Bug 55426
| Summary: | Elements with height 100% do not fill offset parents that are using box flex | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Ryan Fioravanti <rjfioravanti> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Major | CC: | ahmad.saleem792, bfulgham, brandon.wallace, hdn, koivisto, rjfioravanti, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar |
| Version: | 528+ (Nightly build) | ||
| Hardware: | Mac (Intel) | ||
| OS: | OS X 10.5 | ||
| URL: | http://jsfiddle.net/GLex5/1/ | ||
Ryan Fioravanti
In the test page you can easily see the problem
http://jsfiddle.net/GLex5/1/
I have an element with height 100%
It has a parent with position relative and webkit-box-flex: 1
The child element does not expand to fill the parent
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Brandon
Here is a similar example without any position relative in it.
This fiddle: http://jsfiddle.net/GLex5/1/
inner2 should fill up the entire blue box below inner1 since it has a 100% height and its parent was implicitly given a height from the flex-box. The developer toolbar shows that middle2 has a height of 172px but inner2 only has a height of 24px.
Firefox gets it right.
Seems like the height/width properties are evaluated before the flexbox sizing occurs on the parents.
hdn
This bug is still alive and well, found in Chrome 38 on windows 8 and Safari 8 on Yosemite and iOS 8.
Here's a demonstration of the bug:
http://jsfiddle.net/rpmgau47/
Works as expected in FireFox 33 and Internet Explorer 11.
hdn
Heres a -webkit prefixed version for Safari...
http://jsfiddle.net/rpmgau47/1
Brent Fulgham
Chrome and Firefox agree on this. Safari fails the test.
Radar WebKit Bug Importer
<rdar://problem/96910322>