minmax()默认为max

Question

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

如何使网格行保持最小声明大小，以及以后如果添加更多内容--网格行将扩展到声明的最大大小而不是更大？

下面是一个示例：

​

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>

​

Answer 1

很明显，主要浏览器默认为minmax()函数中的minmax()值。

规范定义不清楚如何处理这一问题-- min还是max默认值？--应如何处理：

minmax() 定义大于或等于最小、小于或等于最大值的大小范围。 如果max < min，则忽略max，并将minmax(min,max)视为最小。 作为最大值，<flex>值设置轨道的挠度因子；它作为最小值无效。

这种行为可能还有更多，我还没有在航迹调整算法中发现。

下面是解决这个问题的另一种方法：

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

​

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>

​

Answer 2

一般来说，轨道将试图达到它们的最大尺寸：

如果自由空间为正数，则将其平均分配给所有轨道的基本尺寸，当它们达到增长极限时冻结轨道(并根据需要继续增长未冻结的轨道)。

(在这种情况下，“增长极限”主要是"max size in minmax()“的同义词)。

这通常是你想要的赛道。

为了获得你想要的效果，它紧紧地包裹着，但不会超过一定的限制，你可以稍微调整一下你正在做的事情：

• 在行大小上使用minmax(50px, min-content)；这将使它们与内容紧密结合，但不会让它们缩小到50‘t以下。
• 在实际的网格项目上使用max-height: 150px，这样它们在150 at时就会达到最大值。

这两者结合在一起，应该能达到你想要的效果。