浏览器说flex-basis：内容是“无效的属性值”

Question

鉴于：

 .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> 

现场例子

我的意图是：

• 旁边的内容应与内容所包含的内容一样大，并且永远不要更改其宽度
• 主要应占用其余水平空间
• 两侧和主体应具有相同的高度（两者之和）

但是，如果我运行该代码并使用Chrome对其进行检查，则在两个flex:语句上都会收到以下错误：

无效的属性值

而且，绿色框不会在右侧扩展。 在Mac OS X 10.11.5上，我的Chrome版本是56.0.2924.87（64位）。

我究竟做错了什么？

Answer 1

flex-basis: content是有效的规则，但尚不被所有浏览器支持。

从规格：

content

注意：此值在“ Flexible Box Layout”的初始发行版中不存在，因此某些较早的实现不支持该值。 等同的效果可以通过使用能够实现auto与主尺寸（一起width或height的） auto 。

另请参阅MDN以获取content值的简要历史记录： https : //developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values

Answer 2

使用flex: 1 1 auto 。

按顺序是flex-grow ， flex-shrink和flex-basis的简写。