瀏覽器說，柔性基礎：內容是 「無效的屬性值」

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

我的意圖是：

• 擱置應與其包含的內容一樣大，並且從不改變其寬度
• 主要應採取橫向空間的其餘
• 都放在一邊，主要應具有相同的高度（最大兩個）

，但如果我運行的代碼，檢查是否與鉻我得到兩個flex:語句以下錯誤：

無效的屬性值

而且綠箱不應該擴展到正確的位置。我的Chrome版本在Mac OS X 10.11.5上爲56.0.2924.87（64位）。

我在做什麼錯？

Answer 1

flex-basis: content是一個有效的規則，但它尚未被所有瀏覽器支持。

從規格：

content

注意：此值是不存在的靈活 箱佈局的初始版本，因此一些舊的實現將不會支持它。 可以通過使用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的簡寫順序。