css - tutorial - 如何使flexbox兒童的父母身高達到100%?



flex tutorial (5)

HTML

<div class="container">
    <div class="flex-1"></div>
    <div class="flex-2">
        <div class="flex-2-child"></div>
    </div>
</div>

CSS

.container {
    height: 200px;
    width: 500px;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-1 {
   flex:1 0 100px;
    background-color: blue;
}
.flex-2 {
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1 0 100%;
    background-color: red;
}
.flex-2-child {
    flex: 1 0 100%;
    height:100%;
    background-color: green;
}

http://jsfiddle.net/2ZDuE/750/

https://ffff65535.com

我正試圖在Flexbox內填充Flex項目的垂直空間。

.container {
  height: 200px;
  width: 500px;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}
<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

這裡是JSFiddle

flex-2-child不填充所需的高度,除了以下兩種情況:

  1. flex-2的高度為100%(這很奇怪,因為flex項目默認為100%+在Chrome中是bug)
  2. flex-2-child具有絕對的位置,這也是不方便的

目前,這在Chrome或Firefox中不起作用。


一個想法是display:flex;flex-direction: row; 使用.flex-1.flex-2填充container div,但這並不意味著.flex-2的默認height:100%; 即使它擴展到完全高度並具有height:100%;的子元素( .flex-2-childheight:100%; 您需要將父級設置為height:100%; 或使用display:flex;flex-direction: row;.flex-2 div上。

從我所知道的情況來看display:flex不會將您的所有子元素高度延伸至100%。

一個小的演示,從.flex-2-child移除高度並使用display:flex;.flex-2http://jsfiddle.net/2ZDuE/3/ : http://jsfiddle.net/2ZDuE/3/


我here回答了一個類似的問題。

我知道你已經說過position: absolute; 是不方便的,但它的工作原理。 有關修復調整大小問題的更多信息,請參閱下文。

另請參閱此jsFiddle進行演示,但我只添加了在Chrome中打開的webkit前綴。

你基本上有兩個問題,我將分開處理。

  1. 讓靈活物品的孩子填充身高100%
    • 設置position: relative; 在孩子的父母身上。
    • 設置position: absolute; 對孩子。
    • 然後可以根據需要設置寬度/高度(在我的示例中為100%)。
  2. 在Chrome中修復調整大小滾動“怪癖”
    • overflow-y: auto; 在可滾動的div上。
    • 可滾動的div必須具有指定的明確高度。 我的示例已經有100%的高度,但如果沒有應用,您可以指定height: 0;

有關滾動問題的更多信息,請參閱此answer 。


我認為Chrome的行為更符合CSS規範(儘管它不太直觀)。 根據Flexbox規範, align-self屬性的默認stretch僅更改元素的“cross size屬性”(本例中為height使用 。 而且,據我了解CSS2.1規範 ,百分比高度是根據父級height指定值計算的,而不是其使用的值。 父級height的指定值不受任何彈性屬性的影響,並且仍然是auto

設置顯式height: 100%可以正式計算孩子的百分比高度,就像設置height: 100% to html可以計算CSS2.1中body的百分比高度。


這是我使用css +的解決方案

首先,如果第一個孩子(flex-1)應該是100px不應該彎曲。 在css +中,實際上你可以設置靈活的和/或靜態的元素(列或行),你的例子變得如此簡單:

<div class="container">
  <div class="EXTENDER">
    <div class="COLS">
      <div class="CELL _100px" style="background-color:blue">100px</div>
      <div class="CELL _FLEX" style="background-color:red">flex</div>
    </div>
  </div>
</div>

容器css:

.container {
    height: 200px;
    width: 500px;
    position:relative;
}

顯然包括css + 0.2核心

fiddle





flexbox