minmax() 默认为最大值

Question

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

我们怎样才能使网格行保持在声明的最小大小，然后如果添加更多内容 - 网格行将扩展到最大声明大小而不是更多？

这是一个例子：

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

In general, tracks will try to reach their max size:

如果可用空间为正，则将其平均分配到所有轨道的基本大小，当轨道达到其增长限制时冻结它们（并根据需要继续增长未冻结的轨道）。

（在这种情况下，“增长限制”主要是“minmax() 中的最大大小”的同义词。）

这恰好是您希望轨道执行的操作。

要获得您正在寻找的效果，它会紧紧包裹但不会超过特定限制，您可以稍微调整一下您正在做的事情：

• 在行大小上使用minmax(50px, min-content)；这会将它们紧紧包裹在内容中，但不会让它们缩小到 50 像素以下。
• 在实际的网格项目上使用max-height: 150px，因此它们的最大尺寸为 150 像素。

这两者加起来应该可以达到你想要的效果。

Answer 2

很明显，各大浏览器默认minmax()函数中的max值。

规范定义不清楚这是怎么回事——min或max默认？ – 应该处理：

minmax()

定义大于或等于 min 且小于或 等于 max。

如果 max ，则 max 被忽略，minmax(min,max) 被处理 作为分钟。

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

我在track sizing algorithm 中可能还没有发现更多这种行为。

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

• 将行高设置为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>