为什么这样： div { width: 200px; display: grid; grid: "first second" / 1fr 1fr; background-color:
... . . 为什么这样：
div { width: 200px; display: grid; grid: "first second" / 1fr 1fr; background-color: #ccc; padding: 8px;}#first { grid-area: first;}#second { grid-area: second;} <div> <input id="first" /> <input id="second" /></div>
与此不同的是：
div { width: 200px; display: grid; grid: "first first second second" / 1fr 1fr 1fr 1fr; background-color: #ccc; padding: 8px;}#first { grid-area: first;}#second { grid-area: second;} <div> <input id="first" /> <input id="second" /></div>
请注意,我唯一改变的是列数和每个输入占用的区域.
.解决方法
. 这是规范的一个问题,以及如何解释1fr.
从W3C bug/issue report
.
The “problem” is that 1fr resolves to minmax(auto,1fr) and this means that we need to know the size of (the parent) before resolving the size of the 1fr track (because the min track sizing function is content sized,it’s auto).
There is a quick solution to this issue from the author POV,just replacing 1fr by minmax(0px,1fr) for example.
...或者在这种情况下只需将min-width：0设置为子元素.
. . .. ...