minmax（0，1fr）如何处理长元素，而1fr不起作用？

  • Z时代
  • 2024-01-10
  • 分类：问答

所以我有这个网格：

+---------+------------------------------+---------+    
|  <div>  |  <p> - 1000 characters long  |  <div>  |
+---------+------------------------------+---------+

里面p有没有空格的超长字符串。divs是具有固定尺寸的占位符。这将产生以上结果：

  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto minmax(0, 1fr) auto;

但是更改minmax(0, 1fr)为1fr：

+---------+----------------------------------------+    
|  <div>  |               <p> - 1000 characters long  |  <div>  |
+---------+----------------------------------------+

它溢出其父级，超出屏幕大小。为什么它的行为不像minmax？

回答：

因为默认情况下1fr与等效minmax(auto, 1fr)。

使用时minmax(0, 1fr)，这与standalone有所不同 1fr。

在第一种情况下，轨道不能小于网格项目的大小（ 最小 大小为auto）。

在第二种情况下，轨道可以自由调整为0的宽度/高度。

以上是 minmax（0，1fr）如何处理长元素，而1fr不起作用？ 的全部内容， 来源链接： utcz.com/qa/410324.html

回到顶部