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

我的意图是：

除了它应该包含的内容一样大，永远不要改变它的宽度
main应该占用水平空间的其余部分
无论是旁边还是主要都应该具有相同的高度（两者中的最大值）

但如果我运行该代码并使用Chrome进行检查，则会在flex:个语句中出现以下错误：

无效的属性值

而且绿色框不会在右边展开。我的Chrome版本在Mac OS X 10.11.5上为56.0.2924.87（64位）。

我做错了什么？

Answer 1

flex-basis: content是一个有效的规则，但目前尚未得到所有浏览器的支持。

来自规范：

content

注意：此值在Flexible的初始版本中不存在   Box Layout，因此一些较旧的实现将不支持它。   使用auto和a一起使用可以达到相同的效果   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的简写顺序。

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

2 个答案: