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

所以我有这个网格:


+---------+------------------------------+---------+    

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


千万里不及你
浏览 1142回答 2
2回答

慕斯709654

因为默认情况下1fr与等效minmax(auto, 1fr)。使用时minmax(0, 1fr),这与standalone有所不同&nbsp; 1fr。在第一种情况下,轨道不能小于网格项目的大小(最小大小为auto)。在第二种情况下,轨道可以自由调整为0的宽度/高度。

胡说叔叔

您可以编辑第二个ASCII艺术图吗?尚不清楚单元格的边缘在哪里,因为+和|都没有对齐。
打开App,查看更多内容
随时随地看视频慕课网APP