Browser saying that flex-basis: content is “Invalid property value”

Question

Given:

 .layout { display: flex; flex-wrap: nowrap; align-items: stretch; } .layout aside, .layout main { min-width: 100px; } .layout aside { flex: 0 0 content; background-color: red; } .layout main { flex: 1 1 content; background-color: green; } 

 <div class="layout"> <aside> <p>Line 1</p> </aside> <main> <p>Line 1</p> <p>Line 2</p> <p>Line 3</p> </main> </div> 

Live example

My intentions are:

• aside should be as big as the content it contains and never change its width
• main should take the rest of the horizontal space
• both aside and main should have the same height (the maximum of the two)

but if I run that code and inspect it with Chrome I get the following error on both flex: statements:

Invalid property value

and moreover the green box doesn't expand on the right as it should. My Chrome version is 56.0.2924.87 (64-bit) on Mac OS X 10.11.5.

What am I doing wrong?

Answer 1

flex-basis: content is a valid rule, but it's not supported by all browsers yet.

From the spec:

content

Note: This value was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it. The equivalent effect can be achieved by using auto together with a main size ( width or height ) of auto .

Also see MDN for a brief history of the content value: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values

Answer 2

Use flex: 1 1 auto instead.

It's the shorthand for flex-grow , flex-shrink , and flex-basis , in that order.