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

Question

我想要一列任意数量的 div，每个 div 的宽度为 100%，高度为父 div 的 100%，因此一个最初是可见的，而其他的则向下溢出父级。我已将 div 设置为具有 flex: 0 0 100%;，在父 div 中带有 display: flex 和 flex-direction: column 实现这一目标。

父 div 本身的高度未知，所以它也是 display: flex 和 flex-direction: column 的 child ，设置为 flex : 1 0 0 占用其容器中的剩余空间。

在 Firefox 中，输出如我所愿:

但是，不在 Chrome 中:

如何在没有 Javascript 的情况下在 Chrome 中实现 Firefox 风格？

您可以在 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>

Answer 1

这似乎是 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%。您必须为您的 .column-parent 提供一个 height:50%。如上所示，Chrome 需要父级固定高度。

然后一切都会按照您的需要进行。

演示 fiddle :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 的渲染方式似乎也有所不同。我不知道为什么，但有时我会得到不同的结果!}