Firefox + IE Flexbox 父级高度问题答案

【问题标题】：Firefox + IE Flexbox Parent Height IssuesFirefox + IE Flexbox 父级高度问题
【发布时间】：2016-01-03 19:08:02
【问题描述】：

我将 Flexbox 用于一系列内容块。这个想法是在弹性容器中放置块，其高度将由其中的弹性项目的总数决定。这在 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;
    }      
}

基本上，padding-top: 28.1% 装饰用于设置为内联样式的背景图像。在 chrome + safari 上，这可以很好地计算高度。但是，IE+FF 上没有设置容器的高度。我已经测试了我所有的浏览器前缀并检查了很多问题，但我对为什么计算高度不同的原因有点迷茫。如果有人有任何建议，那就太好了。在块上设置最小高度不是一种选择，因为我们将拥有不同大小的块，因此我们不想将自己限制在固定或最小高度。简短版：Firefox + IE 如何计算 flex 容器和项目的高度有区别吗？如果是这样，让它表现得像 Safari + chrome 的最佳方法是什么？这是一个人为的例子：http://codepen.io/anon/pen/NGjYGR

【问题讨论】：

您可以在问题中包含 HTML 吗？还是演示？仅使用 CSS 无法复制问题。
@Michael_B 好点，附上一个适用于 chrome+safari 但不适用于 firefox + ie 的。谢谢！
我遇到的问题是代码不清楚且令人费解。你有一个包含三个弹性项目的弹性容器。每个弹性项目都是相对定位的（原因尚不清楚）。嵌套在每个弹性项目中的是一个绝对定位的div，其图像具有padding-top: 56.25% 或padding-top: 28.1%。绝对定位的 div 也是弹性容器。然后你有一个外部div 容器包装.container，它缺乏明确的用途。这对你来说可能都很清楚，但从我的角度来看，这很难理解。我试了一下。抱歉，我帮不上忙。
您写道：我有点不明白为什么高度计算方式不同.. Firefox + IE 计算 flex 容器和项目高度的方式有什么不同吗？我在这里的回答可能会给你一些指导：stackoverflow.com/a/32948440/3597276
用例是一个带有背景图像元素的 div，然后是顶部的文本叠加层，因此我们对外部元素使用相对定位，然后对叠加层使用绝对定位，这样我们就可以将它放在我们想要的位置.我们暂时放弃了这个用例的 flexbox，因为跨浏览器的行为太不可预测了。

标签： css internet-explorer firefox flexbox

【解决方案1】：

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

.container
  .primary
    .secondary

.container没有设置高度

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

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

实现flex-basis 和高度计算存在已知问题。这是一篇关于浏览器细微差别的综合文章flex：here。

参考资料：

标准化跨浏览器 Flexbox 错误： http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/

【讨论】：