瀏覽器說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的簡寫。