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

Question

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

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

这在 Chrome 66 中可以正常工作，但在 Firefox 52 ESR 或 Firefox 62 Developer Edition（都在 Linux 上）中不起作用。在 Firefox 中，search-header 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-content 在 Chrome 中完全支持，但在 Firefox 中的支持有限。它还需要 -moz- 前缀才能在 FF 中工作。

• 在MDN 对max-content 的评论还表明，max-content 在 Chrome 中运行良好，但支持有限，并且在 Firefox 中需要 -moz- 前缀。 MDN 还说max-content 是experimental and should not be used in production code。

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

但抛开所有这些，您甚至不需要max-content 来使您的布局正常工作。您可以在第一行使用max-content、min-content 或auto。

然后创建第二行1fr，这会强制第二行消耗容器中的所有剩余高度，挤出第一行的所有可用空间。

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

• fr sizing algorithm
• auto sizing algorithm

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

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;
}

<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>
      <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>

jsFiddle demo

Answer 2

作为Ilya Streltsyn cmets，将auto 替换为1fr 解决了这个问题。任何支持display: grid 的浏览器都将支持fr，auto 和单独使用fr 几乎没有区别：两者都指的是整个无人认领的空间。

grid-template-rows: max-content 1fr;

.search {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 4fr;
  grid-template-rows: max-content 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;
}

<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>

Answer 3

疯狂科学家，我不认为你的代码有什么问题。 结构完美，css和html都有。

我已在 Edge、Chrome 和 Mozilla 上的本地主机上测试了您的代码，它们运行正常。唯一的问题是 IE 11 和 Opera，它们不支持显示网格。