Created attachment 220923 [details]
STR: Load attached testcase.
No red should be visible. (The flex item should resolve its "padding-bottom: 100%" against the container's height, and end up with 200px of padding, covering up all of the red.)
Red is ivsible. Specifically, the top 100px of the container is lime, and the bottom 100px is red.
This indicates that the flex item is resolving its "padding-bottom: 100%" against the container's width (not height), which is incorrect for a flex item.
This was resolved by the CSSWG here:
Note that for a block, it'd be correct to resolve percentage vertical-padding values against the containing block's width. But in a flexbox, it's supposed to resolve against the size of the respective dimension (the height in this case), per spec link above.
I tested this with (webkit-based) Midori 0.4.3. Google Chrome (blink) development versions have the same problem -- see http://code.google.com/p/chromium/issues/detail?id=333533 . Firefox does not have this problem. (I tested both Firefox version 26 and current Nightly)
Looks like this is a duplicate of bug 113519.
*** This bug has been marked as a duplicate of bug 113519 ***