Invalid property name: flex-basis: 1 0 max-content

Question

I'm applying the flex property to to a number of divs on the page, and viewed in Chrome get the following:

The message on hover is Invalid property name.

For what it's worth, my code is as follows:

.class-name {
  flex: 1 0 max-content;
}

I thought max-content was supported in Chrome so am unsure why this would be the case? My browser's up to date and I get the same problem if I pull this into flex-basis.

Any explanations or suggestions greatly appreciated, even (especially) if I'm missing something dead simple :)

Answer 1

According to the browser compatibility chart on MDN, the max-content keyword for flex-basis is still experimental and not compatible with Chrome