css - mdn - flex布局实例




如何使flexbox儿童的父母身高达到100%? (5)

我正试图在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中不起作用。


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/


一个想法是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/


如果我理解正确,你想要flex-2-child来填充它的父母的高度和宽度,以便红色区域被绿色完全覆盖?

如果是这样,你只需要设置flex-2来使用flexbox:

.flex-2 {
    display: flex;  
}

然后告诉flex-2-child变得灵活:

.flex-2-child {    
    flex: 1;
}

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

原因是flex-2-child不是flexbox项目,但其父项是。


我here回答了一个类似的问题。

我知道你已经说过position: absolute; 是不方便的,但它的工作原理。 有关修复调整大小问题的更多信息,请参阅下文。

另请参阅此jsFiddle进行演示,但我只添加了在Chrome中打开的webkit前缀。

你基本上有两个问题,我将分开处理。

  1. 让灵活物品的孩子填充身高100%
    • 设置position: relative; 在孩子的父母身上。
    • 设置position: absolute; 对孩子。
    • 然后可以根据需要设置宽度/高度(在我的示例中为100%)。
  2. 在Chrome中修复调整大小滚动“怪癖”
    • overflow-y: auto; 在可滚动的div上。
    • 可滚动的div必须具有指定的明确高度。 我的示例已经有100%的高度,但如果没有应用,您可以指定height: 0;

有关滚动问题的更多信息,请参阅此answer 。


这是我使用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