minmax()默认为max

问题描述

我试图为grid-template-rows设置minmax()，有趣的是，结果是网格行扩展到minmax()的最大值而不是最小值.

I tried to set minmax() for the grid-template-rows and interestingly enough, the outcome was that grid-rows extended to the max of the minmax() instead of min.

我们如何使网格行保持在最小声明的大小，然后再添加更多内容-网格行将扩展到最大声明的大小，而不是更多?

How could we make grid rows stay at the minimum declared size, and later if more content is added - the grid row would expand to the maximum declared size and not more?

这里是一个例子:

body {
  background: gray;
  border: solid black 1px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: minmax(50px, 150px);
}

aside {
  border-right: solid 1px red;
}

aside.homepage {
  background: blue;
}

<aside></aside>
<aside class="homepage">
  <header></header>
  <main></main>
  <footer></footer>
</aside>
<aside></aside>

推荐答案

很明显，主流浏览器默认使用minmax()函数中的max值.

It's clear that the major browsers default to the max value in the minmax() function.

规范的定义尚不清楚如何处理– min或max默认值? –应该处理:

The spec definition is not clear on how this matter – min or max default? – should be handled:

定义一个大小范围，该范围大于或等于 min 并且小于或 等于 max .

Defines a size range greater than or equal to min and less than or equal to max.

如果 max< min ，则忽略 max 并处理minmax(min,max) 为 min .

If max < min, then max is ignored and minmax(min,max) is treated as min.

最大为<flex>值可设置轨道的弹性系数；它是 至少无效.

As a maximum, a <flex> value sets the track’s flex factor; it is invalid as a minimum.

在曲目大小调整算法.

这是解决该问题的另一种方法:

Here's an alternative approach to the problem:

• 将行高设置为auto(基于内容的高度)
• 管理网格项目的最小和最大高度

• set the row height to auto (content-based height)
• manage the min and max heights on the grid item

body {
  background: gray;
  border: solid black 1px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;  /* adjustment */
}

aside {
  border-right: solid 1px red;
}

aside.homepage {
  background: blue;
  min-height: 50px;   /* new */
  max-height: 150px;  /* new */
}

<aside>aside</aside>
<aside class="homepage">
  <header>header</header>
  <main>main</main>
  <footer>footer</footer>
</aside>
<aside>aside</aside>

这篇关于minmax()默认为max的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！