首页 文章

使flexbox儿童的父母身高100％

提问于
浏览 次
303

我正在尝试填充flexbox内的flex项目的垂直空间：

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  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 没有填写所需的高度，除非在以下两种情况下：

  • flex-2 的高度为100％（这很奇怪，因为灵活项目默认情况下为100％，因此Chrome中存在错误）

  • flex-2-child 具有绝对位置，这也是不方便的

这在目前的Chrome或Firefox中不起作用 .

css css3 flexbox

8 回答

  • 224

    我已经回答了类似的问题here .

    我知道你已经说过 position: absolute; 不方便但是有效 . 有关修复调整大小问题的详细信息，请参阅下文 .

    另请参阅此jsFiddle进行演示，尽管我只在Chrome中添加了webkit前缀 .

    你基本上有2个问题，我将分别处理 .

    • Getting the child of a flex-item to fill height 100%

    • 在子项的父项上设置 position: relative; .

    • 在孩子身上设置 position: absolute; .

    • 然后，您可以根据需要设置宽度/高度（样本中为100％） .

    • Fixing the resize scrolling "quirk" in Chrome

    • 将 overflow-y: auto; 放在可滚动的div上 .

    • 可滚动div必须具有指定的显式高度 . 我的样本已经有100％的高度，但如果没有应用，你可以指定 height: 0;

    有关滚动问题的更多信息，请参见answer .

    回复于
  • -9

    如果我理解正确，你想要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项目，但它的父项是 .

    回复于
  • 2

    与David Storey的答案类似，我的工作是：

    .flex-2
{
 align-items: stretch;
 display: flex;
}

    作为 align-items 的替代，您可以在想要拉伸的 .flex-2-child 项目上使用 align-self .

    回复于
  • 19

    我认为Chrome _1680729不太直观） . 根据Flexbox规范， align-self 属性 align-self 的默认 stretch 值为"cross size property"（在这种情况下为 height ） . 而且，据我所知the CSS2.1 spec，百分比高度是根据父亲的 height 的指定值计算的，而不是其使用的值 . 父级 height 的指定值不受任何弹性属性的影响，仍然是 auto .

    设置显式 height: 100% 使得正式可以计算子项的百分比高度，就像将 height: 100% 设置为 html 一样，可以计算CSS2.1中 body 的百分比高度 .

    回复于
  • 2

    我自己找到了解决方案，假设您有以下CSS：

    .parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- didn't work
}

    在这种情况下，将高度设置为100％将不起作用，因此我所做的是将 margin-bottom 规则设置为 auto ，如：

    .child {
  margin-bottom: auto;
}

    并且子项将与父项的最顶层对齐，如果您愿意，也可以使用 align-self 规则 .

    .child {
  align-self: flex-start;
}
    回复于
  • 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/

    回复于
  • 182

    一个想法是 display:flex; 与 flex-direction: row; 用 .flex-1 和 .flex-2 填充 container div，但这并不意味着 .flex-2 有一个默认的 height:100%; ，即使它被扩展到完整高度并且有一个子元素（ .flex-2-child ）与 height:100%; 你'我需要将父级设置为 height:100%; ，或者在 .flex-2 div上将 display:flex; 与 flex-direction: row; 一起使用 .

    据我所知 display:flex 不会将你所有的子元素高度扩展到100％ .

    一个小的演示，从 .flex-2-child 中移除了高度并在 .flex-2 上使用了 display:flex; ：http://jsfiddle.net/2ZDuE/3/

    回复于
  • 74

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

    听到fiddle

    回复于

相关问题