帶有flexbox的視口高度繼承（Chrome中的不一致）‽

EDIT：從Chrome 34開始，以下構造將按預期正確呈現。從這之後，它實際上是 ealier Chrome版本中的一個錯誤，並且這個相對簡單的CSS 只需的作品。帶有flexbox的視口高度繼承（Chrome中的不一致）‽

所以我剛剛發現viewport-percentage lengths，我想他們會去偉大的使用Flex-盒圓滑的響應式佈局的測試。令人驚訝的是，Firefox和Internet Explorer以同樣的方式呈現它，並且與預期的一樣。這一次，Chrome拒絕做我說的。

我想：沒有滾動條，全部div元素根據父母改變大小，使用height: 100%，即使沒有內容也可見的框佈局，插入塊級內容到佈局中。

爲了更具體地說明原因，它是父元素的高度，似乎不被繼承。在這種情況下，我期望height: 100%在內部元素上導致父元素的高度，它本身是70vh（等於視口高度的70％）。

如果內部沒有內部div，Chrome根本就不顯示該元素（與FF/IE不同），就好像它們根本就不是塊元素（沒有高度爲空）。

請告訴我：

它是一個未公開Chrome有錯誤（或根本的Webkit需要額外屬性）？
如果不是錯誤：FF和IE以這種方式行爲的原因是什麼（看似正確）？
可能flex-direction: column是問題（修改元素流）？

畢竟，它說I can use it。

下面的代碼：http://jsfiddle.net/ZPRdh/

這裏的渲染：

rendering in browsers

編輯

似乎flex-box在這個ISS無關UE。下面的HTML頁面再現佈局理念，也使得同樣在IE和FF，但不能在Chrome：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>stackoverflow.com/questions/19450503/</title> 
     <style type="text/css"> 
      body{background-color:#000;margin:0;font:normal 4em sans-serif;color:#888;} 
      header,section,footer{overflow:hidden;} 
      header,section,footer,article,figure{display:block;margin:0;padding:0;} 
      header {background-color:#333;height:20vh;} 
      section{background-color:#555;height:70vh;} 
      footer {background-color:#777;height:10vh;} 
      article{background-color:#999;width:20vmin;height:20vmin;} 
      figure {background-color:#BBB;width:50%;height:50%;} 
     </style> 
    </head> 
    <body> 
     <header></header> 
     <section> 
      <article> 
       <figure></figure> 
      </article> 
     </section> 
     <footer></footer> 
    </body> 
</html>

要麼我（和其他人）沒有得到的東西在這裏根本，還是有一個實際的意外不一致在Chrome中。

來源

2013-10-18 dakab

我不確定這是一個bug還是一個功能，但是Chrome（和Opera的使用Presto）並沒有像處理元素的實際大小那樣處理沿着主軸的長度（列方向的高度，行方向的寬度）。這就是爲什麼百分比不能像你期望的那樣工作：中間元素的高度被視爲足夠大以容納4行文本。

如果您需要幫助的孩子，填補了柔性的項目，你需要將它推廣到柔性容器（雖然這並不在你的情況制定出完全正確）。

http://jsfiddle.net/ZPRdh/3/

.b { 
    height:70vh; 
    background-color:#555; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    justify-content: flex-start; 
} 

.b>div:nth-child(1) { 
    width:50%; 
    height:30%; 
    flex: 30%; 
    background-color:#AAA; 
} 
.b>div:nth-child(2) { 
    width:40%; 
    height:40%; 
    flex: 40%; 
    background-color:#CCC; 
} 
.b>div:nth-child(3) { 
    width:30%; 
    height:30%; 
    flex: 30%; 
    background-color:#EEE; 
}

來源

2013-10-21 12:50:29 cimmanon

帶有flexbox的視口高度繼承（Chrome中的不一致）‽

回答

相關問題