为什么Firefox不尊重flex div的高度，但Chrome是？ [英] Why is Firefox not honoring flexed div's height, but Chrome is?

问题描述

我有一个容器，它包含 display：flex 和 flex-direction：column ，其中一个div与 height：300px 和 flex：1 Chrome浏览器将嵌套的div渲染为300px高，但Firefox将其渲染为一行。。

这只是两个浏览器之间的flexbox实现之间的细微差别，或者是这个不好的代码？如果一个细微差别，最好的办法是缓解？

.container {display ： 柔性; flex-direction：column;}。container> div {background-color：＃666;白颜色; flex：1; height：300px;}

< div class =container > < div> Firefox中的单行，但在Chrome浏览器中高300px< / div>< / div>

解决方案

$ b

• flex-grow：1


• flex-shrink：1


• flex-basis：0

Chrome会看到这个，但是会覆盖 flex-basis ，其中 height：300px 。

Firefox看到这个，但是不覆盖 flex-basis height：300px 。

简单的跨浏览器解决方案是摆脱 height 规则并使用：

  flex：1 0 300px 
  

就规范而言，Firefox具有正确的行为：

< blockquote>


7.1。 flex
速记



，请参考 flex 来代替主要的
大小属性来确定框的主大小。

弹性物品的主尺码
物业 a>是
，或者是宽度或高度属性

< blockquote>

This is best illustrated with a simple example.

I have a container with display: flex and flex-direction: column, with a single div inside with height: 300px and flex: 1.

Chrome renders the nested div at 300px tall, but Firefox renders it as a single line. Is this just a nuance between the implementation of flexbox between the two browsers, or is this bad code somehow? If a nuance, what's the best way to mitigate?

.container {
  display: flex;
  flex-direction: column;
}

.container > div {
  background-color: #666;
  color: white;
  flex: 1;
  height: 300px;
}

<div class="container">
  <div>Single line in Firefox, but 300px tall in Chrome!</div>
</div>

解决方案

The flex: 1 shorthand rule breaks down as follows:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

Chrome sees this, but overrides flex-basis with height: 300px.

Firefox sees this, but does not override flex-basis with height: 300px.

The simple cross-browser solution is to get rid of the height rule and just use:

flex: 1 0 300px

In terms of the spec, Firefox has the correct behavior:

7.1. The flex Shorthand

When a box is a flex item, flex is consulted instead of the main size property to determine the main size of the box.

The flex item’s main size property is either the width or height property.

这篇关于为什么Firefox不尊重flex div的高度，但Chrome是？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！