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

根据MDN上的浏览器兼容性图表， flex-basis的max-content关键字仍处于试验阶段，与Chrome不兼容