minmax() 默认为 max

Question

我尝试设置minmax()，grid-template-rows有趣的是，结果是网格行扩展到 的最大值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

一般来说，轨道会尝试达到其最大尺寸：

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

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

这通常正是您希望曲目执行的操作。

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

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

这两个结合在一起应该可以达到你想要的效果。

Answer 2

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

\n\n

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

\n\n

\n

minmax()

\n\n

定义大于或等于min且小于或等于max 的大小范围。

\n\n

如果max < min，则max被忽略并被minmax(min,max)视为min。

\n\n

作为最大值，一个<flex>值设置 track\xe2\x80\x99s 弹性系数；它至少是无效的。

\n

\n\n

在轨道大小调整算法中，我还没有发现这种行为的更多内容。

\n\n

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

\n\n

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

\n\n

\r\n

\r\n

body {\r\n  background: gray;\r\n  border: solid black 1px;\r\n  display: grid;\r\n  grid-template-columns: 1fr 2fr 1fr;\r\n  grid-template-rows: auto;  /* adjustment */\r\n}\r\n\r\naside {\r\n  border-right: solid 1px red;\r\n}\r\n\r\naside.homepage {\r\n  background: blue;\r\n  min-height: 50px;   /* new */\r\n  max-height: 150px;  /* new */\r\n}

\r\n

<aside>aside</aside>\r\n<aside class="homepage">\r\n  <header>header</header>\r\n  <main>main</main>\r\n  <footer>footer</footer>\r\n</aside>\r\n<aside>aside</aside>

\r\n

\r\n

\r\n

\n