如何使嵌套flexboxes工作

我有一個嵌套的Flexbox，就設置一個小例子：http://jsfiddle.net/ThomasSpiessens/MUrPj/12/如何使嵌套flexboxes工作

<div class="box fullSize"> 
    <div class="boxHeader">HEADER</div> 
    <div class="boxContent"> 
     <div class="box fullSize"> 
      <div class="boxHeader moregreen">INNER HEADER</div> 
      <div class="boxContent red">CONTENT CONTENT CONTENT</div> 
      <div class="boxFooter moreblue">INNER FOOTER</div> 
     </div> 
    </div> 
    <div class="boxFooter">FOOTER</div> 
</div>

在這個例子中出現以下情況：

CSS「盒子」類上使用Flexbox的性質只有boxContent被告知增長。對於特定的CSS屬性和值，請檢查小提琴。
'fullSize'只是將寬度和高度設置爲100％。

當您使用Firefox和Chrome查看該提琴時，會得到不同的結果。在Firefox中，它做了我想它必須做的事情，這正在擴展內部的.box內容。然而，在Chrome中，內部的.box內容不會被拉伸。

有沒有人有一個想法如何使內容在Chrome中延伸？也許缺少一個特定的webkit屬性？

來源

2013-09-05 Thomas

除非你需要那多餘的div，刪除它。沿着主軸（列方向），元素的高度和長度有時會有所不同，這在這裏引起一些混淆。基本上，它看起來喜歡它比瀏覽器認爲它要高，這就是爲什麼height: 100%不像你期望的那樣工作（我不確定在這種情況下哪種行爲是正確的）。

無論出於何種原因，促使元素爲柔性容器的作品。

http://jsfiddle.net/MUrPj/14/

<div class="box fullSize"> 
    <div class="boxHeader">HEADER</div> 
    <div class="boxContent box"> 
     <div class="boxHeader moregreen">INNER HEADER</div> 
     <div class="boxContent red">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div> 
     <div class="boxFooter moreblue">INNER FOOTER</div> 
    </div> 
    <div class="boxFooter">FOOTER</div> 
</div>

來源

2013-09-05 17:50:47 cimmanon

這對我有用。在任何情況下都無法讓包裝div伸展。擺脫它，工作得很好。有點討厭。 – Obie

我已經找到了解決方案，無需去除額外股利。

您需要使boxContent相對定位並且它包含絕對框。

有了一個額外的CSS類連接到內部的div：

<div class="boxContent"> 
    <div class="box fullSize innerBox">

和下面的CSS：

.boxContent { 
    ... 
    position: relative; 
} 
.innerBox{ 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
}

這裏是更新的jsfiddle：http://jsfiddle.net/MUrPj/223/

這個問題是很老，但這可能有助於未來的遊客

來源

2015-11-23 14:07:37 user3200478

Thanx男人，在我的情況下，最好的解決方案，嵌套元素必須是行內塊 – Codeartist

這q uestion已被鏈接到一個特定的問題：如何使flex框中的嵌套元素填充整個高度？簡短的回答是：

對孩子使用display:flex並避免height:100%。這是一個simplified example on codepen。

CourtDemone解釋它阱（更here）：

按照Flexbox的規範，一個align-self:stretch值（默認爲一個flex'd元件）僅改變使用的元件的橫的值大小屬性（在這種情況下，高度）。然而，百分比是從指定的家長的跨尺寸屬性的值計算的，而不是它的使用價值。

來源

2016-03-08 13:59:21 ldwg

如何使嵌套flexboxes工作

回答

相關問題