我正在使用 Material UI 开发 React 应用程序。我在应用程序的一页上遇到问题。
该页面包含一些文本和一个按钮，它们彼此垂直对齐。它还包含第二段文本和第二个按钮，它们彼此垂直对齐并且最初是隐藏的。第一个按钮可用于显示第二段文本和第二个按钮。第二个按钮可用于隐藏第二段文本及其本身(即第二个按钮)。
这是一个指向页面截图的链接，其中显示了最初隐藏的内容(我还没有足够的 StackOverflow 代表点来嵌入图像)。
react-material-ui-app-page-screenshot
我遇到的问题是:
当我点击第一个按钮(即“SHOW”按钮)，然后点击第二个按钮(即“HIDE”按钮)，然后再次点击第一个按钮； 第一个按钮跳过页面。更具体地说，它的右边缘接触 <body> 的右边缘。元素，使其左边缘接触前一段文本的右边缘。
按钮跳转后，当我调整浏览器窗口大小时(例如，通过单击并拖动 Chrome 应用程序窗口)，按钮会返回到其原始位置。
注意:跳转发生在 Chrome 中，但不会发生在 Firefox 中。
你们知道为什么会这样吗？
我在 CodeSandbox 上创建了这个现象的演示。这是该演示的链接:
最佳答案
仔细观察，这似乎与 display: flex; 上的 。 flex-wrap: wrap 有关。 flex 方向:列；
wrap={"nowrap"}
...修复它。
查看here .
很难说是不是bug。就列宽而言，我们对具有 flex-wrap:wrap 且没有设置 height 的 flex 列容器有什么期望？
因为正确的行为可能是尽可能地缩小列。
错误在于它在不同的上下文中呈现不同。无论正确的行为是什么，都应该是一致的。
关于css - 为什么当我点击这个 Material-UI Grid item 时它会移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58440743/