为什么当我点击这个 Material-UI Grid 项目时它会移动？答案

【问题标题】：Why does this Material-UI Grid item move when I click on it?为什么当我点击这个 Material-UI Grid 项目时它会移动？
【发布时间】：2020-02-14 20:29:57
【问题描述】：

我正在使用 Material UI 开发一个 React 应用程序。我的应用程序的一页有问题。

该页面包含一些文本和一个按钮，它们彼此垂直对齐。它还包含第二段文本和第二个按钮，它们彼此垂直对齐并且最初是隐藏的。第一个按钮可用于显示第二段文本和第二个按钮。第二个按钮可用于隐藏第二段文本及其本身（即第二个按钮）。

这是页面截图的链接，最初隐藏的内容可见（我还没有足够的 StackOverflow 代表点来嵌入图像）。

我遇到的问题是：

当我单击第一个按钮（即“SHOW”按钮），然后单击第二个按钮（即“HIDE”按钮），然后再次单击第一个按钮； 第一个按钮跳过页面。更具体地说，它的右边缘接触<body> 元素的右边缘，到它的左边缘接触前一段文本的右边缘。

按钮跳转后，当我调整浏览器窗口大小（例如，通过单击并拖动 Chrome 应用程序窗口）时，按钮会返回到其原始位置。

注意：跳跃发生在 Chrome 中，但不在 Firefox 中。

你们中有人知道为什么会这样吗？

我在 CodeSandbox 上创建了这个现象的演示。这是该演示的链接：

【问题讨论】：

【解决方案1】：

您可以通过在第 19 行添加宽度来防止这种行为。

19 <Grid item style={{ border: "1px dashed lightblue", width: "100%" }}>

【讨论】：

这个答案也适用于我。我将另一个标记为“最有帮助”，因为它与我碰巧已经工作的抽象级别相同（即使用特定于 Material UI 组件的道具而不是使用 CSS 规则）——不包括虚线我在演示中添加了调试。我对两个答案都“投了赞成票”，Stack Overflow 告诉我，虽然它会“记录”两个赞成票，但它不会公开显示它们，因为我拥有的代表点数太少了。谢谢！

【解决方案2】：

仔细观察，它似乎与 flex-wrap: wrap 在 display: flex; flex-direction: column; 上有关。

wrap={"nowrap"}

...修复它。

看到它here。

很难说这是否是一个错误。对于具有flex-wrap:wrap 而没有设置height 的弹性列容器，在列宽方面我们应该期待什么？
因为正确的行为可能是尽可能地缩小列。

错误在于它在不同的上下文中呈现不同。无论正确的行为是什么，它都应该是一致的。

【讨论】：