HTML Flexbox 容器在 Firefox 中无法自动调整宽度

Question

我有以下 HTML 布局：

.top-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.content-container {
  display: flex;
  flex-direction: column;
  height: 500px;
  flex-wrap: wrap;
  border: 2px solid black;
}

.content {
  width: 100px;
  height: 100px;
  background-color: yellow;
  border: 2px solid blue;
  margin: 10px;
}

<div class="top-container">
  <div class="content-container">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">4</div>
    <div class="content">5</div>
    <div class="content">6</div>
    <div class="content">7</div>
    <div class="content">8</div>
  </div>
  <div class="content-container">
    <div class="content">1</div>
    <div class="content">2</div>
    <div class="content">3</div>
    <div class="content">4</div>
    <div class="content">5</div>
    <div class="content">6</div>
    <div class="content">7</div>
    <div class="content">8</div>
  </div>
</div>

在 Chrome、Brave、Edge 和 Opera 中看起来很正常，但在 Firefox 中则不然。内容容器的宽度不会根据 Firefox 中的内容进行调整。有谁知道为什么会发生这种情况？我有最新版本的 Firefox，根据我可以使用，它应该可以工作。我发现了一些关于这个主题的其他线程，但它们没有帮助，而且都已经有好几年了。从那时起可能发生了一些变化。我希望有人知道这个问题并可以帮助我。

我的布局的解释：我有一个顶级 div（顶部容器），它将所有 div 排列成一行。该 div 应占据所需的水平空间。然后，我有一个中间 div（内容容器）。这应该将其所有 div 排列在一列中。如果没有足够的垂直空间，它应该换行并使用剩余空间创建一个新列。该 div 可以根据需要占用尽可能多的水平空间，但不应垂直增长。最后是内容 div。它们具有固定大小，不应更改。因此，使用 flex:1 没有帮助，因为它会导致它们收缩，这在这种情况下是不希望的。

致以诚挚的问候

火狐

其他浏览器

我已经尝试过设置最小宽度和最小高度，因为我读到这可能是一种解决方法，但它不起作用。

Answer 1

使用 Firefox，您需要设置 flex-grow 值，如果设置为 1，div 将按预期比例增长：

.content-container {
  display: flex;
  flex-direction: column;
  height: 500px;
  flex-wrap: wrap;
  border: 2px solid black;
  flex-grow: 1;
}