小编典典

minmax(0,1fr)如何处理长元素,而1fr不起作用?

css

所以我有这个网格:

+---------+------------------------------+---------+    
|  <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?


阅读 519

收藏
2020-05-16

共1个答案

小编典典

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

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

在第一种情况下,轨道不能小于网格项目的大小( 最小 大小为auto)。

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

2020-05-16