.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;
布局 > <一旁> < p>第1行< / p> < /预留> <主> < p>第1行< / p> < p>第2行< / p> < p>第3行< / p> < / main>< / div>
我的意图是：
但如果我运行该代码并使用Chrome进行检查，则在 flex：语句中收到以下错误：
无效的财产值
此外，应该扩大权利。我的Chrome版本在Mac OS X 10.11.5上是56.0.2924.87（64位）。
我做错了什么？
有关 content 值的简要历史记录，另请参阅MDN： https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values
Given:
.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>
My intentions are:
but if I run that code and inspect it with Chrome I get the following error on both flex: statements:
Invalid property value
and moreover the green box doesn't expand on the right as it should. My Chrome version is 56.0.2924.87 (64-bit) on Mac OS X 10.11.5.
What am I doing wrong?
flex-basis: content is a valid rule, but it's not supported by all browsers yet.
From the spec:
Note: This value was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it. The equivalent effect can be achieved by using
autotogether with a main size (widthorheight) ofauto.
Also see MDN for a brief history of the content value: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values
这篇关于浏览器说flex-basis：内容是“无效的属性值”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
