Flexbox 在 Firefox 中看起来完全不同答案

【问题标题】：Flexbox looking completely different in firefoxFlexbox 在 Firefox 中看起来完全不同
【发布时间】：2018-05-30 14:56:52
【问题描述】：

我认为这个问题可能被认为是相当“愚蠢”的，但我想知道为什么我的 flexbox 在 Firefox 中看起来完全不同。我忘记了什么非常感谢任何帮助。恐怕这是我错过的非常简单的事情

看起来是这样的：

铬：

火狐：
我的代码：

CSS：

.flex-container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
 -webkit-flex-flow: row;
  justify-content: space-around;
  line-height: 30px;
}
.flex-item {
    border: 1px solid black;
    margin: 30px;
    /* max-width: 350px; */
    max-height: 350px;
    min-height: 72px;
    text-align: center;
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

HTML：

<div class="flex-container">
    <div class="flex-item">
        <div id="catBox">
            Kategorie 1
        </div>
    </div>

    <div class="flex-item">
        <div id="catBox">
            Kategorie 2
        </div>
    </div>

    <div class="flex-item">
        <div id="catBox">
            Kategorie 2
        </div>
    <div class="flex-item">
        <div id="catBox">
            Kategorie 3
        </div>
</div>

【问题讨论】：

实际上，它的渲染方式完全符合预期。因为，给定 flex-item 的最小高度是 72px，并且文本足够小，不需要扩展。如果您希望它具有更高的高度，请更改最小高度或设置一个高度。
它在 chrome 和 firefox 上呈现完全相同的最小高度值。
但是如何让它保持响应呢？
您到底在期待什么？第一个输出还是第二个？两者都从表面上看是有反应的，只是考虑到了您的最小高度值。只是增加它。
我建议您将最小高度固定为绝对值并使宽度响应，使用 flexbox 使高度响应并不是您在对齐时的特别用途行明智的方式。

标签： html css google-chrome firefox flexbox

【解决方案1】：

这是一个演示。

.flex-container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  justify-content: space-around;
  line-height: 30px;
}

.flex-item {
  border: 1px solid black;
  margin: 20px;
  height:35vh;
  text-align: center;
  flex: 1;
}

<div class="flex-container">
  <div class="flex-item">
    <div id="catBox">
      Kategorie 1
    </div>
  </div>

  <div class="flex-item">
    <div id="catBox">
      Kategorie 2
    </div>
  </div>

  <div class="flex-item">
    <div id="catBox">
      Kategorie 3
    </div>
  </div>
  <div class="flex-item">
    <div id="catBox">
      Kategorie 4
    </div>
  </div>
</div>

<div class="flex-container">
  <div class="flex-item">
    <div id="catBox">
      Kategorie 1
    </div>
  </div>

  <div class="flex-item">
    <div id="catBox">
      Kategorie 2
    </div>
  </div>
  <div class="flex-item">
    <div id="catBox">
      Kategorie 3
    </div>
  </div>
  <div class="flex-item">
    <div id="catBox">
      Kategorie 4
    </div>
  </div>
</div>

【讨论】：

谢谢，有帮助。高度赞赏。
没问题 :) @floreich

【解决方案2】：

可能原因是Firefox version你检查了。

在57.0.1 上，我看到了相同的结果。

【讨论】：

我使用的是最新版本。