代码之家 › 专栏 › 技术社区 › Mad Scientist

css网格布局max content在firefox中不能按预期工作

css-grid css html

4

Mad Scientist · 技术社区 · 7 年前

我使用css网格布局为一个页面创建了一个基本布局,我最初是在chrome中工作的。我现在也在firefox中测试了这个,并注意到一些我不理解的行为,这些行为似乎并不像我理解的那样遵循规范。

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

这在chrome 66中可以正常工作,但在firefox 52 esr或firefox 62 developer版本(都在linux上)中不能正常工作。在firefox中,搜索头div更大,并且超出了所包含的范围。只有当搜索侧边栏div中有输入元素时才会发生这种情况,而且我添加的元素越多,搜索头div得到的值就越大。

我是否误解了最大内容应该如何工作?为什么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中的外观,以及它的设计意图:

3 回复 | 直到 7 年前

1

4

Michael Benjamin William Falcon 7 年前

我首先回顾一下浏览器对 max-content 尺寸值。

以下是一些观察结果:

这个 min-content 我是说, 最大含量 和 fit-content() 价值观都是新的。他们被介绍进来了 CSS Intrinsic & Extrinsic Sizing Module Level 3 是的。所以完全的浏览器支持已经被怀疑了。
浏览器支持表回顾 caniuse.com 揭示了 最大含量 完全支持Chrome,但仅限于Firefox。它还需要 -moz- 在FF中工作的前缀。
回顾 最大含量 在 MDN 也表明 最大含量 在Chrome中运行良好,但支持有限,需要 -莫兹- 在Firefox中添加前缀。MDN也说 最大含量 是 experimental and should not be used in production code .

这些条目可能描述了布局中chrome/firefox不一致的原因。

但是把这些放在一边,你甚至不需要 最大含量 使你的布局工作。你可以用 最大含量 我是说, 最小含量 或 auto 在第一排。

然后坐第二排 1fr ,这将迫使第二行占用容器中的所有剩余高度,并将第一行中的所有可用空间挤出。

这个 汽车 值不执行此操作,因为它在不同的算法下运行 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

2

wordbug 7 年前

作为 Ilya Streltsyn 注释,替换 auto 对于 1fr 解决了这个问题。任何支持 display: grid 将支持 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>

3

0

Torjescu Sergiu 7 年前

疯狂的科学家,我认为你的代码没有任何问题。 css和html的结构都很完美。

我已经在我的本地主机edge、chrome和mozilla上测试了你的代码,它们工作正常。唯一的问题是IE 11和Opera,它们不支持显示网格。