css-grid - 交互式复制中的 CSS Grid 意外分布

Question

我认为这是一个浏览器错误，但在测试的 Chrome 和 Firefox 当前版本（在 Windows 上）中行为是相同的。

为什么长的换行文本会导致列分布被调整？即使在换行之后，它也会随着换行的文本变长而继续调整。您可以通过固定选择或交互式大小的 textarea 来查看它（textarea 的行为稍有预期，只是为了便于演示 - 我不太关心 textarea 是否工作。）

https://codesandbox.io/s/romantic-sea-1pwcl

标签： css-grid

Answer 1

根据这个提交的错误报告的讨论中的提示，答案是

...您的轨道本质上是大小的，因此为了计算网格区域，我们需要网格项的内在贡献。所以在计算这些时，最大宽度百分比是循环的！...基本上，您想要的是在调整轨道大小时避免采用 textarea 的内在贡献。我的建议是利用

对于最小尺寸属性以及边距和填充（和装订线），循环百分比根据零解析，以确定内在尺寸贡献。

并将包含 textarea 的网格项设置为：

width: 0; /* Sets intrinsic width to 0 */
min-width: 100%; /* Has no effect during intrinsic sizing, overrides the declaration above when laying out for real */