弹性基础flexbox中的100％：Firefox的全高，而不是Chrome [英] Flex basis 100% in column flexbox: full height in Firefox, not in Chrome

问题描述

我想要一列任意数量的div，每个div的宽度为100％，高度为100％，所以一开始就是可见的，其他的则向下溢出。我已经把div设置为 flex：0 0 100％; ，在父元素内，显示：flex 和 flex-direction：column 来达到此目的。

父div本身具有未知高度，所以它是也是的一个子元素：flex 和 flex-direction：column ，设置为 flex ：1 0 0 在其容器中占用剩余空间。

在Firefox中，输出如我所愿：

如何在Chrome中实现Firefox样式，

你可以在 http://plnkr.co/edit/WnAcmwAPnFaAhqqtwhLL?p=preview ，以及相应版本的 flex-direction：row

$ b

仅供参考，完整的CSS

  .wrapper {
 display：flex; 
 flex-direction：column; 
 height：150px; 
 width：200px; 
 border：4px纯绿色; 
 margin-bottom：20px; 
} 
 
 .column-parent {
 flex：1 0 0; 
 display：flex; 
 flex-direction：column; 
 border：2px纯蓝色; 
} 
 
 .column-child {
 flex：0 0 100％; 
 border：2px纯红色; 
 
 code $ 
 
 $和b 
 
 $ pre> < div class =wrapper> 
< p>一些未知尺寸的内容< / p> 
< div class =column-parent> 
< div class =column-child> 
应该是绿色的
< / div> 
< div class =column-child> 
应该是绿色的
< / div> 
< / div> 
< / div> 
  




解决方案

正如Abhitalks响应中所述，或者标准的不同解释），Chrome在这里处理 height 属性。

我发现了一个黑客， Chrome FF和IE

诀窍是将flex-direction设置为row，将基于flex的（现在是width）设置为100％，然后转换元素

  .container {border：solid 2px blue; height：200px;宽度：200px;显示：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;显示：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：n-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>如果有可能的话，那么你可以在这个网站上找到你的电子邮件地址，这个电子邮件地址就是你的电子邮件地址。成为另一个孩子，你需要一个孩子（4）规则，等等。

我已经添加了一个悬停效果来检查大小如何适应

I would like a column of divs, of any number, each with width 100% and height 100% of their parent div, so one is visible initially, and the others overflow the parent downwards. I've set the divs to have flex: 0 0 100%;, inside a parent div with display: flex and flex-direction: column to achieve this.

The parent div is itself of unknown height, so it is also a child of a display: flex and flex-direction: column, set to flex: 1 0 0 to take remaining space in its container.

In Firefox the output is as I would like it:

However, not in Chrome:

How can I achieve the Firefox style in Chrome, without Javascript?

You can see this in action at http://plnkr.co/edit/WnAcmwAPnFaAhqqtwhLL?p=preview, as well as the corresponding version with flex-direction: row, which works consistently in both Firefox and Chrome.

For reference, the full 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;
}

and 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>

解决方案

As stated in Abhitalks response, there is a bug (or a different interpretation of the standard) in the way Chrome handles the height attribute here.

I have found a hack that is working both in Chrome FF and IE

The only issue is that you ned to have as many rules as posible children there are.

The trick is to set the flex-direction to row, set the flex-basis (that is now the width) to 100%, and then translate the elements

.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>

If there could be another child, you would need a nth-child(4) rule, and so on

I have added an hover effect to check how the size adapts

这篇关于弹性基础flexbox中的100％：Firefox的全高，而不是Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！