Question

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

我创建了一个简化的示例来显示行为。问题是搜索标题div的高度。设置为最大内容，并且应该与容纳所包含元素的大小一样大。

此功能在Chrome 66中可以正常运行，但在Firefox 52 ESR或Firefox 62开发人员版（全部在Linux中）上无法正常工作。在Firefox中，搜索标题div较大，并且超出了所包含的范围。仅当search-sidebar div中有输入元素时，才会发生这种情况，并且我添加的元素越多，search-header 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不同的算法下起作用。

因此，由于上述原因，请对您的代码进行以下简单调整：

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条评论中，将auto替换为1fr可解决此问题。任何支持display: grid的浏览器都将支持fr，auto与fr的一种用法之间几乎没有区别：两者都是指无人认领的空间的全部。 / p>

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，它们不支持显示网格。

CSS网格布局的最大内容无法在Firefox中正常工作

3 个答案:

jsFiddle demo