CSS Grid 布局 max-content 在 Firefox 中无法按预期工作

Question

我使用 CSS Grid 布局来创建页面的基本布局，而我最初是在 Chrome 中工作的。我现在也在 Firefox 中对此进行了测试，并注意到一些我不理解的行为，并且似乎不符合我理解的规范。

我创建了一个显示行为的简化示例。问题是搜索标题 div 的高度。这被设置为 max-content 并且应该和所包含的元素一样大。

这在 Chrome 66 中按预期工作，但不适用于 Firefox 52 ESR 或 Firefox 62 开发人员版（均在 Linux 上）。在 Firefox 中，搜索头 div 更大并且超出了包含的范围。这只发生在搜索侧栏 div 中有输入元素时，并且我添加的元素越多，搜索标题 div 就越大。

我是否误解了 max-content 应该如何工作？为什么 Firefox 和 Chrome 在这种情况下表现不同？我该如何解决这个问题？

.search {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 4fr;
  grid-template-rows: max-content auto;
  grid-gap: 10px;
  height: 95vh;
  width: 100%;
  align-self: stretch;
  background: #FFF;
  overflow: hidden;
  margin-top: 5px;
}

.search-sidebar {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background: #CCFFFF;
  padding: 5px;
}

.search-header {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  background: #FFCCCC;
  padding: 5px;
}

.search-table {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  background: #FFFFAA;
}

<div class="search">
  <div class="search-sidebar">
    <div>
      <label>Label:</label>
      <div><input type="text"></div>
    </div>
    <div>
      <label>Label:</label>
      <div><input type="text"></div>
    </div>
    <div>
      <label>Label:</label>
      <div><input type="text"></div>
    </div>
  </div>
  <div class="search-header">
    <span>some text here</span>
  </div>
  <div class="search-table"></div>
</div>

这是它在 Firefox 中的样子：

这是它在 Chrome 中的外观，以及它的预期外观：

Answer 1

我将首先回顾浏览器对max-content大小值的支持。

以下是一些观察结果：

• 的min-content，max-content和fit-content()值都是新的。它们是在CSS Intrinsic & Extrinsic Sizing Module Level 3中引入的。因此，完整的浏览器支持已经令人怀疑。

• caniuse.com上浏览器支持表的审查显示，max-contentChrome 完全支持，但 Firefox 支持有限。它还需要-moz-前缀才能在 FF 中工作。

• max-content在MDN 上的评论也表明它max-content在 Chrome中工作正常，但支持有限并且需要-moz-在 Firefox 中使用前缀。MDN 还说这max-content是实验性的，不应在生产代码中使用。

这些项目可能描述了布局中 Chrome / Firefox 差异的原因。

但是把所有这些放在一边，你甚至不需要max-content让你的布局工作。您可以在第一行使用max-content,min-content或auto。

然后制作第二行1fr，这会迫使第二行消耗容器中所有剩余的高度，挤压第一行的所有可用空间。

该auto值不会这样做，因为它在与 不同的算法下运行fr。

• fr 大小算法
• auto 大小算法

因此，出于上述原因，对您的代码进行简单的调整：

grid-template-rows: auto 1fr;

grid-template-rows: auto 1fr;

.search {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 4fr;
  grid-template-rows: auto 1fr;
  grid-gap: 10px;
  height: 95vh;
  width: 100%;
  align-self: stretch;
  background: #FFF;
  overflow: hidden;
  margin-top: 5px;
}

.search-sidebar {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background: #CCFFFF;
  padding: 5px;
}

.search-header {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  background: #FFCCCC;
  padding: 5px;
}

.search-table {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  background: #FFFFAA;
}

jsFiddle 演示