浏览器说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>

Live example

我的意图是:

• 旁边应该与它包含的内容一样大,永远不要改变它的宽度
• 主要应该采取其余的水平空间
• 一边和另一边应该有相同的高度(两者中的最大值)

但如果我运行该代码并使用Chrome检查它,我会在两个flex:语句中收到以下错误:

无效的属性值

此外,绿色框不会像它应该的那样在右侧扩展.我的Chrome版本在Mac OS X 10.11.5上为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