>Does this work in other browsers?

Yes, Firefox, IE11, Edge

The only browser this does not work in is Safari because of this bug: https://bugs.webkit.org/show_bug.cgi?id=137730

The test case has style rules
flex: 1 1;
flex: 1 1 auto;

getComputedStyle(...).flex shows that we have
"1 1 0%"
"1 1 auto"

This is working as intended:

https://www.w3.org/TR/css-flexbox-1/#flex-property
<‘flex-basis’> "When omitted from the flex shorthand, its specified value is 0."

https://developer.mozilla.org/en/docs/Web/CSS/flex
says <'flex-basis'> "Defaults to 0% when omitted" from the shorthand.


> the default value for flex-basis is "auto".
That applies when flex is none.

Ok, seems I was incorrect in my understanding of how the the default value for flex-basis is computed.  However, I still think we have a bug here - that is the inability to use a percentage size on a child element of a flexed item with flex-basis:auto.

IE11, Firefox, and latest Edge browsers all respect a percentage-size on a direct child of a flexed item regardless of whether the computed flex-basis is 0 or auto.

Try the test case in Firefox or Edge and see what I mean - both green boxes successfully consume 50% of the height of their parent elements.

Any thoughts on this?  Do you disagree that one should be able to use a percentage sized item inside of an element that has flex-basis: auto?   All modern browsers except for chrome support this.

The current Blink behaviour is correct per spec; the other browsers have a bug per spec. Of course, the conclusion could be the spec has a bug, but that's not a discussion for here.