minmax(0，1fr)如何适用于长元素，而1fr不适用? [英] How come minmax(0, 1fr) works for long elements while 1fr doesn't?
问题描述
所以我有这个网格:
+---------+------------------------------+---------+
| <div> | <p> - 1000 characters long | <div> |
+---------+------------------------------+---------+
在p内部，有一个超长的字符串，没有空格. div是具有固定尺寸的占位符.
产生上面的内容:
Inside p there's super long string with no spaces. divs are placeholders with fixed dimensions.
This produces the above:
display: grid;
grid-auto-flow: column;
grid-template-columns: auto minmax(0, 1fr) auto;
但是将minmax(0, 1fr)更改为1fr可以得到:
But changing minmax(0, 1fr) to 1fr gives this:
+---------+----------------------------------------+
| <div> | <p> - 1000 characters long | <div> |
+---------+----------------------------------------+
它溢出其父级并且超出屏幕大小.为什么它的行为不像minmax?
It overflows out of its parent and way out of screen size. Why isn't it behaving like minmax?
推荐答案
因为默认情况下1fr等同于minmax(auto, 1fr).
Because 1fr is equivalent to minmax(auto, 1fr), by default.
使用minmax(0, 1fr)时，与独立的1fr有所不同.
When you use minmax(0, 1fr), that's something different than standalone 1fr.
在第一种情况下，轨迹不能小于网格项目的大小( min 的大小为auto).
In the first case, the track cannot be smaller than the size of the grid item (min size is auto).
在第二种情况下，可以随意将轨道的大小调整为0的宽度/高度.
In the second case, the track is free to resize to a 0 width/height.
更多详细信息:
- Reconsider the meaning of
1fr - Prevent grid area from expanding causing whole page to scroll
这篇关于minmax(0，1fr)如何适用于长元素，而1fr不适用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
