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

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

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

minmax()

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

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

最大值是<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>