所以我有这个网格:
+---------+------------------------------+---------+
| <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?
最佳答案
因为1fr
默认等同于minmax(auto, 1fr)
。
当您使用 minmax(0, 1fr)
时,这与独立的 1fr
有所不同。
在第一种情况下,轨道不能小于网格项的大小(最小大小为auto
)。
在第二种情况下,轨道可以自由调整为 0 宽度/高度。
更多详情:
关于css - 为什么 minmax(0, 1fr) 对长元素有效而 1fr 却不行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52861086/