Question

我正在将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;
    }      
}

基本上，padding-top: 28.1%装饰用于将背景图像设置为内联样式。在chrome + safari上，这可以很好地计算高度。但是，IE + FF上未设置容器的高度。我已经测试了我的所有浏览器前缀并检查了很多问题，但我有点迷失为什么高度计算方式不同。如果有人有任何优秀的建议。在块上设置最小高度不是一种选择，因为我们将有不同大小的块，因此我们不希望将自己约束到固定或最小高度。简短版：Firefox + IE如何计算弹性容器和物品的高度有什么不同？如果是这样，那么让它像Safari + chrome一样运行的最佳方法是什么？这是一个人为的例子：http://codepen.io/anon/pen/NGjYGR

Answer 1

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

.container
  .primary
    .secondary

.container

上没有设置高度

如果未在此元素上设置尺寸，那么如何计算子元素的尺寸（即：＆＃34; 28.1％＆＃34;？）？

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

实现flex-basis和高度计算存在已知问题。以下是有关flex here上的浏览器细微差别的综合文章。

参考文献：

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

Firefox + IE Flexbox父级高度问题

1 个答案:

参考文献：