CSS网格布局的最大内容无法在Firefox中正常工作 [英] CSS Grid layout max-content does not work as expected in Firefox

问题描述

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

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

此功能在Chrome 66中可以正常使用，但在Firefox 52 ESR或Firefox 62 Developer Edition（全部在Linux上）中无法使用。在Firefox中，搜索标题div较大，并且超出了所包含的范围。仅当search-sidebar div中存在输入元素时，才会发生这种情况，并且我添加的元素越多，search-header div就会越大。

Am我误解最大内容应该如何工作？为什么在这种情况下Firefox和Chrome的行为有所不同？而我该如何解决呢？

  .search {display：grid; grid-template-columns：minmax（200px，1fr）4fr; grid-template-rows：最大内容自动； grid-gap：10px;高度：95vh；宽度：100％;自我调整：伸展背景：#FFF；溢出：隐藏； margin-top：5px;}。search-sidebar {grid-column：1/2;网格行：1/3;背景：#CCFFFF； padding：5px;}。search-header {grid-column：2/3;网格行：1/2;背景：#FFCCCC； padding：5px;}。search-table {grid-column：2/3;网格行：2/3;背景：#FFFFAA;}  

 < div class =搜索 < div class = search-sidebar> < div> < label>标签：< / label> < div><输入类型= text>< / div> < / div> < div> < label>标签：< / label> < div><输入类型= text>< / div> < / div> < div> < label>标签：< / label> < div><输入类型= text>< / div> < / div> < / div> < div class = search-header> < span>此处的一些文本< / span> < / div> < div class = search-table>< / div>< / div>  

这是在Firefox中的外观：

这就是它在Chrome中的外观以及它的外观：

。因此，已经完全怀疑对浏览器的支持。

浏览器支持表的评论，位于 caniuse.com 显示最大内容在Chrome中具有完全支持，但仅限于Firefox中的支持。它还需要 -moz-前缀才能在FF中使用。

对<$ c的评论在 MDN的$ c>最大内容 还显示最大内容在Chrome中可以正常工作，但支持有限，并且需要 -moz- Firefox中的前缀。 MDN还说，最大内容是实验性的，不应在生产代码中使用。

这些项目可能描述您的版式中的Chrome / Firefox差异的原因。

但是撇开所有这些，您甚至不需要 max-content 使您的布局生效。您可以使用最大内容，最小内容或自动

然后将第二行设为 1fr ，这将强制第二行消耗所有剩余的行

auto 值不执行此操作，将所有可用空间挤出第一行。因为它在与 fr 不同的算法下工作。

• fr 调整算法


• 自动大小调整算法

因此，由于上述原因，对代码的简单调整：

  grid-template-rows：auto 1fr; 
  

  .search {display：grid; grid-template-columns：minmax（200px，1fr）4fr; grid-template-rows：自动1fr; grid-gap：10px;高度：95vh；宽度：100％;自我调整：伸展背景：#FFF；溢出：隐藏； margin-top：5px;}。search-sidebar {grid-column：1/2;网格行：1/3;背景：#CCFFFF； padding：5px;}。search-header {grid-column：2/3;网格行：1/2;背景：#FFCCCC； padding：5px;}。search-table {grid-column：2/3;网格行：2/3;背景：#FFFFAA;}  

 < div class =搜索 < div class = search-sidebar> < div> < label>标签：< / label> < div><输入类型= text>< / div> < / div> < div> < label>标签：< / label> < div><输入类型= text>< / div> < / div> < div> < label>标签：< / label> < div><输入类型= text>< / div> < / div> < div> < label>标签：< / label> < div><输入类型= text>< / div> < / div> < div> < label>标签：< / label> < div><输入类型= text>< / div> < / div> < div> < label>标签：< / label> < div><输入类型= text>< / div> < / div> < / div> < div class = search-header> < span>此处的一些文本< / span> < / div> < div class = search-table>< / div>< / div>  

jsFiddle演示

I used CSS Grid layout to create a basic layout for a page, and I worked originally in Chrome while doing that. I tested this now also in Firefox and noticed some behaviour that I don't understand and that doesn't seem to follow the specification as I understand it.

I created a simplified example that shows the behaviour. The problem is the height of the search-header div. This is set to max-content and should be just as large as needed to fit the contained element.

This works as expected in Chrome 66, but not in Firefox 52 ESR or Firefox 62 Developer Edition (all on Linux). In Firefox the search-header div is larger and extends beyond the contained span. This does only happen if there are the input elements in the search-sidebar div, and the more of them I add the larger the search-header div gets.

Am I misunderstanding how max-content is supposed to work? Why are Firefox and Chrome behaving differently in this case? And how can I fix this?

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

This is how it looks in Firefox:

And this is how it looks in Chrome, and how it is intended to look:

解决方案

I would start with a review of browser support for the max-content sizing value.

Here are a few observations:

• The min-content, max-content and fit-content() values are all new. They were introduced in CSS Intrinsic & Extrinsic Sizing Module Level 3. So full browser support is already suspect.

• A review of browser support tables at caniuse.com reveals that max-content has full support in Chrome, but only limited support in Firefox. It also requires the -moz- prefix to work in FF.

• A review of max-content at MDN also shows that max-content works fine in Chrome, but has limited support and requires the -moz- prefix in Firefox. MDN also says that max-content is experimental and should not be used in production code.

Those items may describe the reason for the Chrome / Firefox discrepancy in your layout.

But putting all that aside, you don't even need max-content to make your layout work. You can use max-content, min-content or auto on the first row.

Then make the second row 1fr, which forces the second row to consume all remaining height in the container, squeezing all free space out of the first row.

The auto value does not do this because it functions under a different algorithm than fr.

• fr sizing algorithm
• auto sizing algorithm

So, for the reasons described above, make this simple adjustment to your code:

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

这篇关于CSS网格布局的最大内容无法在Firefox中正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！