javascript - 为什么 DialogContent 在包含带有间距的嵌套网格时会添加滚动条而不是进一步扩展？

Question

我目前正在处理一个显示在对话框窗口中的表单。为了调整表单字段的布局，我Grid在另一个 s 中使用了几个 s Grid。我发现当 a Gridwith anyspacing是 main 的最后一个子组件时，Grid即使有足够的空间可以拉伸整个对话框，也会添加一个滚动条：

我已经设法在sandbox中重现它。当其他任何东西是一切的最后一个子组件时，DialogContent一切都很好。即使是一个简单的<p/>修复它。当 mainGrid没有spacing参数时也可以。

这个奇怪的故障占用了我很多时间，所以我真的很想知道为什么会发生这种情况（以便将来可能避免类似的故障）。

标签： javascriptreactjsmaterial-ui

Answer 1

这可能与负边距有关。

摘录的解决方法是：

1. 不使用间距功能并在用户空间间距={0}（默认）中实现它。
2. 将填充应用于父级，至少一半的间距值应用于子级：
3. 添加溢出-x：隐藏；给父母。