css - 為什麼minmax(0,1fr)適用於長元素而1fr不適用?



css3 css-grid (1)

因為 1fr 相當於 minmax(auto, 1fr) ,默認情況下。

當你使用 minmax(0, 1fr) ,這與獨立的 1fr 不同。

在第一種情況下,軌道不能小於網格項的大小( 最小 尺寸為 auto )。

在第二種情況下,軌道可以自由調整大小到0寬度/高度。

更多細節:

所以我有這個網格:

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

p 裡面有超長的字符串,沒有空格。 div 是具有固定尺寸的佔位符。 這產生了以上:

  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?

Codepen





css-grid