Css Firefox+；IE Flexbox父级高度问题

我正在使用Flexbox来创建一系列内容块。其想法是将块放在flex容器中，其高度将由其中flex项的总数决定。这在Chrome和Safari上运行良好，因为它可以自动正确地计算容器高度，但在Firefox+IE上不会发生同样的情况。我的CSS如下所示：

.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  .primary {
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    margin-bottom: 10px;
   -webkit-box-flex: 1;
   -webkit-flex: 1 0 100%;
   -ms-flex: 1 0 100%;
   flex: 1 0 100%;
  }
  .secondary {
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 28.10026385%;
    flex: 2 1 40%;
    margin-left: 10px;
    }      
}

本质上，

填充顶部：28.1%

装饰用于设置为内联样式的背景图像。在chrome+safari上，这可以很好地计算高度。但是，容器的高度未在IE+FF上设置。我已经测试了我所有的浏览器前缀，并检查了很多问题，但我有点不明白为什么高度计算不同。如果有人有任何建议，那就太好了。在块上设置最小高度不是一个选项，因为我们将有不同大小的块，所以我们不想将自己限制为固定或最小高度。 简短版本：Firefox+IE计算flex容器和项目高度的方式有差异吗？如果是这样，那么让它表现得像Safari+chrome的最佳方式是什么？

---

这里有一个人为的例子：

我注意到您所引用的代码存在一些潜在的问题。此外，如果没有引用代码的完整上下文，则缺少HTML建议是基于以下假设，即您的HTML是按以下方式构造的：

.container
  .primary
    .secondary

集装箱上未设置高度

如果未在此元素上设置维度，如何计算子元素的维度（即：的“28.1%”）

flex的某些浏览器实现存在许多已知问题规范

实施

flex-basis

和高度计算存在已知问题。这是一篇关于

flex

浏览器细微差别的综合文章：

参考资料： 规范化跨浏览器Flexbox错误：

---

您能在问题中包含HTML吗？还是演示？仅CSS无法复制此问题。@Michael_B很好，附加了一个适用于chrome+safari但不适用于firefox+ie的问题。谢谢！我遇到的问题是，代码不清楚且复杂。您有一个包含三个flex项的flex容器。每个弹性项都相对定位（原因尚不清楚）。在每个flex项目中嵌套的是一个绝对定位的

div

，图像具有

填充顶部：56.25%

或

填充顶部：28.1%

。绝对定位的div也是flex容器。然后您有一个外部的

div

容器来包装

.container

，它没有明确的用途。这对你来说可能都很清楚，但从我的角度来看，这很难理解。我试了一下。对不起，我帮不上忙。你写道：我有点搞不懂为什么高度的计算方法不同。。Firefox+IE计算flex容器和项目高度的方式是否存在差异？我在这里的回答可能会给你一些指导：用例是一个带有背景图像元素的div，然后是一个顶部的文本覆盖，所以我们对外部元素使用相对定位，然后对覆盖使用绝对定位，这样我们就可以把它放在我们想要的地方。由于flexbox在浏览器中的行为太不可预测，因此我们暂时放弃了这个用例。