Flex 基礎中的 100％Flexbox 中的全高度：Firefox 中的全高，而不是 Chrome

問題描述

我想要一列 div，其中任何一個數字，每個 div 的寬度為 100％，高度為父 div 的 100％，因此最初可見 div，而其他 div 則超出父級。我已經將 div 設定為 flex: 0 0 100%;，在 display: flex 和 flex-direction: column 的父 div 內實現。

父 div 本身身高不變，因此它也是 display: flex 和 flex-direction: column 的孩子，設定為 flex: 1 0 0 以在其容器中佔用剩餘空間。

在 Firefox 中，輸出是我想要的：

但是，不在 Chrome 中：

如何在 Chrome 中實現 Firefox 風格，無需 Javascript？

您可以在 http://plnkr.co/edit/WnAcmwAPnFaAhqqtwhLL?p=preview 中看到這一點，以及與 flex-direction: row 相對應的版本，它們在 Firefox 和 Chrome 中都能保持一致。

作為參考，全面的 CSS

.wrapper {
  display: flex;
  flex-direction: column;
  height: 150px;
  width: 200px;
  border: 4px solid green;
  margin-bottom: 20px;
}

.column-parent {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  border: 2px solid blue;
}

.column-child {
  flex: 0 0 100%;
  border: 2px solid red;
}

和 HTML

<div class="wrapper">
  <p>Some content of unknown size</p>
  <div class="column-parent">
    <div class="column-child">
      Should be inside green
    </div>
    <div class="column-child">
      Should be outside green
    </div>
  </div>
</div>

最佳解決思路

正如 Abhitalks 的回應所述，Chrome 在這裡處理高度屬性的方式有一個錯誤 (或標準的不同解釋) 。

我發現一個在 Chrome FF 和 IE 工作的駭客

唯一的問題是，你已經擁有與可口可樂的孩子一樣多的規則。

訣竅是將 flex-direction 設定為行，將 flex-basis(現在是寬度) 設定為 100％，然後翻譯元素



.container {
    border: solid 2px blue;
    height: 200px;
    width: 200px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.filler {
    border: solid 1px black;
    flex: 0 0 80px;
    background-color: lightgreen;
    transition: flex 1s;
}

.container:hover .filler {
    flex: 0 0 40px;
}

.test {
    border: solid 1px red;
    flex: 1 0 25px;
    display: flex;
    flex-direction: row;
    position: relative;
}

.child {
    background-color: rgba(200, 0, 0, 0.26);
    flex: 0 0 100%;
}

.child:nth-child(2) {
    background-color: rgba(255, 255, 0, 0.48);
    transform: translateX(-100%) translateY(100%);
}

.child:nth-child(3) {
    background-color: rgba(173, 216, 230, 0.28);
    transform: translateX(-200%) translateY(200%);
}
<div class="container">
    <div class="filler"></div>
    <div class="filler"></div>
    <div class="test">
    	   <div class="child">1</div>
    	   <div class="child">2</div>
    	   <div class="child">3</div>
    </div>
</div>

如果還有另一個孩子，你需要一個 nth-child(4) 規則，等等

我新增了懸停效果來檢查尺寸是如何適應的

次佳解決思路

這似乎是 Chrome 的錯誤。類似於這裡報道的 (issue 428049)，也許與 (issue 346275)有關。

This says：

- Browsers are supposed to resolve percentages on the flex item's child, *if* its flex-basis is definite. - Gecko is *always* resolving percentages regardless of the flex-basis. - Chrome is *never* resolving percentages, regardless of the flex-basis.

簡而言之，Chrome 不能解決 flex-item 的孩子的百分比高度 (即使孩子本身是 flex-item)，而所有其他瀏覽器都是這樣。

這可以在下面的程式碼片段中展示：(Fiddle here)



* { box-sizing: border-box; margin: 0; padding: 0; }
div.wrap {
    height: 120px; width: 240px; margin: 0px 12px;
    border: 1px solid blue; float: left;
    display: flex; flex-direction: column;
}
div.parent {
    flex: 0 0 100%;
    border: 1px solid green;
    display: flex; flex-direction: column;
}
div.item {
    flex: 0 0 100%;
    border: 1px solid red;
}
<div class="wrap">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
</div>
<div class="wrap">
    <div class="parent">
        <div class="item">a</div>
        <div class="item">b</div>
        <div class="item">c</div>
    </div>
</div>

第二個 div 應該顯示與第一個相同的行為。其他瀏覽器 (IE11，Edge，FF39) 正確顯示。 Chrome 在這裡失敗，不能正確解析 div.item 。它的父母需要一個固定的高度，沒有它，它使用 min-content 作為其高度，因此不會溢位。

而在第一個 div 中，div.item 被正確解析並相應溢位。這是因為在父母 (即 div.wrap) 上有一個固定的高度

可能的解決方案：

作為解決方法，如果您確定在包裝器中只有兩個元素 (p 和 div)，那麼您可以給他們一個 50% 高度。您必須提供 height:50% .column-parent 。如上所述，Chrome 需要父母的固定高度。

那麼一切都會按照你的需要工作。

演示小提琴：http://jsfiddle.net/abhitalks/kqncm65n/

相關 CSS：

.wrapper > p { flex: 0 0 50%; }  /* this can be on flex-basis */
.column-parent {
    flex: 1 0 auto; height: 50%; /* but, this needs to be fixed height */
    display: flex; flex-direction: column;
    border: 2px solid blue;
}
.column-child {
    flex: 0 0 100%;              /* this flex-basis is then enough */
    border: 2px solid red;
}

PS：jsfiddle 和 plnkr 渲染的方式似乎也有差異。我不知道為什麼，但有時我得到不同的結果！

第三種解決思路

我以前的答案是一個利用所需佈局的特定設定的駭客。

一般來說，解決這個 Chrome 錯誤的另一種方法是在佈局中使用中間元素，並使用 top：0px 和 bottom：0px 設定此元素大小。 (而不是高度：100％)Chrome 處理微積分的方式仍然存在一個錯誤，需要一個假動畫才能正確調整



.container {
    border: solid 2px blue;
    height: 200px;
    width: 200px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.filler {
    border: solid 1px black;
    flex: 0 0 94px;
    background-color: lightgreen;
    transition: 1s;
}

.container:hover .filler {
    flex: 0 0 50px;
}

.test {
    border: solid 1px red;
    flex: 1 0 25px;
    display: flex;
    flex-direction: row;
    position: relative;
}

@-webkit-keyframes adjust2 {
    0% {flex-basis: 100%;}
  100% {flex-basis: 100.1%;}
}
.child {
    background-color: rgba(200, 0, 0, 0.26);
    width:  100%;
    height: 100%;
    flex: 1 0 100%;
    -webkit-animation: adjust2 1s infinite; /* only needed for webkit bug */
}

.intermediate {
    width:  100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    display: flex;
    flex-direction: column;
}

.child:nth-child(n+2) {
    background-color: rgba(255, 255, 0, 0.48);
}

.child:nth-child(n+3) {
    background-color: rgba(173, 216, 230, 0.28);
}
<div class="container">
    <div class="filler"></div>
    <div class="test">
        <div class="intermediate">
    	       <div class="child"></div>
    	       <div class="child"></div>
    	       <div class="child"></div>
        </div>
    </div>
</div>

第四種思路

如何將 100％新增到容器中？

.column-parent {
  flex: 1 0 100%;
}

並將 flex-grow 置於 1 含量元素中，無需調整柔性基礎：

.column-child {
  flex: 1 0 0;
}

以下是它的外觀：http://plnkr.co/edit/H25NQxLtbi65oaltNVax?p=preview

參考文獻

Flex basis 100% in column flexbox: full height in Firefox, not in Chrome

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

Flex 基礎中的 100％Flexbox 中的全高度：Firefox 中的全高，而不是 Chrome