灵活性基础列灵活箱100％：Firefox中的全高，而不是Chrome

Question

我想要一个任意数字的div列，每个div的宽度为100％，高度为父div的100％，因此最初可以看到一个，而其他的则向下溢出父级。 我已将div设置为flex: 0 0 100%; ，在父div中display: flex和flex-direction: column来实现这一点。

父div本身具有未知高度，因此它也是display: flex的子节点display: flex和flex-direction: column ，设置为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的一个错误。 类似于此处报道的（问题428049） ，也许与（问题346275）有关 。

这说 ：

\n  - 浏览器应该解决flex项目的子项上的百分比，*如果*它的flex-basis是明确的。\n  -  Gecko *总是*解决百分比，无论灵活性如何。\n  - 无论灵活性如何，Chrome都不会*解析百分比。 

总而言之，Chrome并没有解决flex-item的孩子的百分比高度（ 即使孩子本身是灵活项目 ），而所有其他浏览器都这样做。

这可以在下面的代码片段中演示:( 这里小提琴 ）

 * { 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应该显示与第一个div相同的行为。 其他浏览器（IE11，Edge，FF39）正确显示。 Chrome在此处失败，无法正确解析div.item 。 它的父级需要一个固定的高度，没有它就会使用min-content作为高度，因此不会溢出。

然而，在第一个div ， div.item被正确解析并相应地溢出。 这是因为父级有一个固定的高度（即div.wrap ）

---

可能解决方案

作为一种解决方法，如果您确定在包装器中只有两个元素 （ p和div ），那么您可以给它们50%高度。 您必须为.column-parent提供height:50%的height:50% 。 如上所示，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呈现的方式似乎也存在差异。 我不知道为什么，但有时我会得到不同的结果！}

Answer 2

正如Abhitalks响应中所述，Chrome在此处理高度属性的方式存在错误（或标准的不同解释）。

我发现Chrome浏览器和IE浏览器都有效

唯一的问题是，你必须拥有尽可能多的有关孩子的规则。

诀窍是将flex-direction设置为row，将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）规则，依此类推

我添加了一个悬停效果来检查尺寸如何适应

Answer 3

我以前的答案是一个利用所需布局的特定设置的黑客。

另一种解决此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> 

Answer 4

如何向容器添加100％：

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

并且在不调整弹性基础的情况下，在包含的元素中弹性增长到1：

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

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