百分比高度不嵌套Flexbox的佈局在Chrome

工作

我有一個如下的佈局在Firefox和IE完全工作： Firefox 百分比高度不嵌套Flexbox的佈局在Chrome

遺憾的是，相當破碎在Chrome，即深藍色的集裝箱被摺疊，即使它有身高100％的父母： Chrome

我試過this approach，但沒有任何運氣。任何想法如何解決這個問題在Chrome瀏覽器沒有打破它在其他瀏覽器？

html, 
 
body { 
 
    height: 97%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div { 
 
    border: 10px dotted teal; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    border-color: tomato; 
 
    height: 100%; 
 
} 
 

 
.row { 
 
    flex-flow: row; 
 
} 
 

 
.column { 
 
    flex-flow: column; 
 
} 
 

 
.item1 { 
 
    flex: 1; 
 
} 
 

 
.item2 { 
 
    flex: 2; 
 
} 
 

 
.item3 { 
 
    flex: 3; 
 
} 
 

 
.c1 { 
 
    border-color: gold; 
 
} 
 

 
.c2 { 
 
    border-color: darkblue; 
 
}

<div class="container"> 
 
    <div class="item3"> 
 
    <div class="container column c2"> 
 
     <div class="item1 c1"></div> 
 
     <div class="item3"></div> 
 
    </div> 
 
    </div> 
 
    <div class="item1 c1"></div> 
 
    <div class="item2"></div> 
 
</div>

來源

2015-06-25 monnef

的問題說：

我已經在Firefox和IE瀏覽器下的佈局完全工作。不幸的是，它在Chrome中被打破，即深藍色的容器即使具有其父項高度的100％也會摺疊。

實際上，可能會有相反的結論：鉻合適，而Firefox和IE「破碎」。使用百分比時設置height

<html> <!-- height: 97% --> 
<body> <!-- height: 97% --> 
<div class="container"> <!-- height: 100%; --> 
    <div class="item3"> <!-- height: ?? --> 
     <div class="container column c2"> <!-- height: 100% ; this is the collapsed box --> 
         ... 
         ... 
         ...

由於每CSS specification，：

首先，這裏的解決方案：

.item3 { height: 100%; }

現在，讓我們看看你的文檔結構和高度應用的一個元素（就像你正在做的.container），父元素必須也有明確的hei GHT。參照摺疊的div，其父（.item3）沒有定義的高度。

從spec：

<百分比>
百分比相對於計算所生成的框的包含塊的高度。如果包含塊的高度沒有明確指定（即，它取決於內容高度），並且該元素未被絕對定位，則值計算爲'auto'。

auto
高度取決於其他屬性的值。

在height性能而言，似乎從該示例中鉻定義的「包含塊」定義爲「父」，而Firefox和IE定義「包含塊」爲「祖先」，或他們尊重撓曲高度作爲百分比高度的參考。

因此，由於深藍色邊框（.container column c2）的div沒有內容，且其父項沒有指定高度，因此沒有高度，並且該框在Chrome中摺疊。

但是，通過指定.item3（摺疊框的父級）的高度，高度在所有瀏覽器上都能正常工作。

DEMO

UPDATE

更多細節：

Heights rendering differently in Chrome and Firefox

來源

2015-09-15 01:33:54

哦，我完全忘了這個問題（可恥的是我），我已經走它在GitHub上的Angular Material ticket中解決。不過，我相信這也會幫助其他人（或未來我）。謝謝你的回答。 – monnef

百分比高度不嵌套Flexbox的佈局在Chrome

回答

相關問題