灵活性基础列灵活箱100%:Firefox中的全高,而不是Chrome

Question

我想要一个任意数字的div列,每个div的宽度为100%,高度为父div的100%,因此最初可以看到一个,而其他的则向下溢出父级.我设置的div有flex: 0 0 100%;,与父DIV中display: flex和flex-direction: column实现这一目标.

父div本身具有未知高度,因此它也是a的子项,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)有关.

这说:

- 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的孩子的百分比高度(即使孩子本身是灵活项目),而所有其他浏览器都这样做.

这可以在下面的代码片段来说明:(小提琴这里)

* { 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.items被正确地解析并相应地溢出.这是因为父母有一个固定的高度(即div.wrap)

可能解决方案

作为一种解决方法,如果您确定在包装器中只有两个元素(p和div),那么您可以给它们一个50%高度.你必须提供height:50%给你的.column-parent.如上所示,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