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

Question

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

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

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

我遇到的问题是：

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

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

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

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

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

Answer 1

仔细一看，这似乎与flex-wrap: wrap拥有display: flex; flex-direction: column;.

wrap={"nowrap"}

...修复它。

请参阅此处。

很难说这是否是一个错误。就列宽而言，我们应该对带有flex-wrap:wrap和不带有 set 的Flex 列容器期望什么？因为正确的行为可能是尽可能缩小列。height

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