Question

最好用一个简单的例子说明。

我有一个包含display: flex和flex-direction: column的容器，其中一个div包含height: 300px和flex: 1。

Chrome将嵌套div渲染为300px高，但Firefox将其渲染为单行。这只是两个浏览器之间的flexbox实现之间的细微差别，还是这个坏代码？如果细微差别，缓解的最佳方法是什么？

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

Answer 1

flex: 1速记规则细分如下：

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具有正确的行为：

7.1. The flex Shorthand

如果某个框是弹性项目，则会查询flex而不是主要内容   size属性，用于确定框的主要大小。

弹性项目的main size property是   width或height属性。

为什么Firefox不尊重flex div的高度，但Chrome是？

1 个答案: