html – CSS网格布局max-content在Firefox中无法正常工作

概述我使用CSS网格布局为页面创建基本布局,我最初在Chrome中工作.我现在也在Firefox中对此进行了测试,并注意到一些我不理解的行为,并且似乎没有按照我的理解遵循规范. 我创建了一个显示行为的简化示例.问题是搜索标题div的高度.这被设置为max-content,并且应该与所需的元素一样大. 这在Chrome 66中可以正常使用,但在Firefox 52 ESR或Firefox 62 Deve 我使用CSS网格布局为页面创建基本布局,我最初在Chrome中工作.我现在也在firefox中对此进行了测试,并注意到一些我不理解的行为,并且似乎没有按照我的理解遵循规范.

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

这在Chrome 66中可以正常使用,但在firefox 52 ESR或firefox 62 Developer Edition(所有在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 >  <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 >    <span>some text here</span>  </div>  <div ></div></div>

这就是它在firefox中的样子：

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

@H_301_30@解决方法 我将首先回顾浏览器对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,强制第二行消耗容器中的所有剩余高度,挤压第一行中的所有空闲空间.

自动值不会这样做,因为它在与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 >  <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>      <label>Label:</label>      <div><input type="text"></div>    </div>  </div>  <div >    <span>some text here</span>  </div>  <div ></div></div>

jsFiddle demo

总结

以上是内存溢出为你收集整理的html – CSS网格布局max-content在Firefox中无法正常工作全部内容，希望文章能够帮你解决html – CSS网格布局max-content在Firefox中无法正常工作所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。