为什么这个 Material-UI 网格项在我点击它时会移动？
Why does this Material-UI Grid item move when I click on it?
我正在使用 Material UI 开发 React 应用程序。我的应用程序页面有问题。
该页面包含一些文本和一个按钮，它们彼此垂直对齐。它还包含第二段文本和第二个按钮，它们彼此垂直对齐并且最初是隐藏的。第一个按钮可用于显示第二段文本和第二个按钮。第二个按钮可用于隐藏第二段文字及其本身（即第二个按钮）。
这是 link 页面的屏幕截图，其中显示了最初隐藏的内容（我还没有足够的 Whosebug 代表点来嵌入图像）。
react-material-ui-app-page-screenshot
我遇到的问题是：
当我点击第一个按钮（即"SHOW"按钮），然后点击第二个按钮（即"HIDE"按钮），然后再次点击第一个按钮； 第一个按钮在页面上跳转。更具体地说，它从让它的右边缘接触 <body> 元素的右边缘，到让它的左边缘接触前一段文本的右边缘。
按钮跳转后，当我 调整浏览器大小时 window（例如，通过单击并拖动 Chrome 应用程序 window） , 按钮 returns 回到原来的位置。
注意：跳转 发生在 Chrome 中，但不会发生在 Firefox 中。
你们知道为什么会这样吗？
我在 CodeSandbox 上创建了这个现象的演示。这是该演示的 link：
您可以通过向第 19 行添加宽度来防止该行为。
19 <Grid item style={{ border: "1px dashed lightblue", width: "100%" }}>
仔细一看，这似乎与 flex-wrap: wrap 在 display: flex; flex-direction: column; 上有关。
wrap={"nowrap"}
...修复它。
看到它here。
很难说是不是bug。就列宽而言，我们对具有 flex-wrap:wrap 而没有集合 height 的弹性列容器有什么期望？
因为正确的行为可能是尽可能地缩小列。
错误在于它在不同的上下文中呈现不同。无论正确的行为是什么，都应该是一致的。
我正在使用 Material UI 开发 React 应用程序。我的应用程序页面有问题。
该页面包含一些文本和一个按钮，它们彼此垂直对齐。它还包含第二段文本和第二个按钮，它们彼此垂直对齐并且最初是隐藏的。第一个按钮可用于显示第二段文本和第二个按钮。第二个按钮可用于隐藏第二段文字及其本身（即第二个按钮）。
这是 link 页面的屏幕截图，其中显示了最初隐藏的内容（我还没有足够的 Whosebug 代表点来嵌入图像）。
react-material-ui-app-page-screenshot
我遇到的问题是：
当我点击第一个按钮（即"SHOW"按钮），然后点击第二个按钮（即"HIDE"按钮），然后再次点击第一个按钮； 第一个按钮在页面上跳转。更具体地说，它从让它的右边缘接触 <body> 元素的右边缘，到让它的左边缘接触前一段文本的右边缘。
按钮跳转后，当我 调整浏览器大小时 window（例如，通过单击并拖动 Chrome 应用程序 window） , 按钮 returns 回到原来的位置。
注意：跳转 发生在 Chrome 中，但不会发生在 Firefox 中。
你们知道为什么会这样吗？
我在 CodeSandbox 上创建了这个现象的演示。这是该演示的 link：
您可以通过向第 19 行添加宽度来防止该行为。
19 <Grid item style={{ border: "1px dashed lightblue", width: "100%" }}>
仔细一看，这似乎与 flex-wrap: wrap 在 display: flex; flex-direction: column; 上有关。
wrap={"nowrap"}
...修复它。
看到它here。
很难说是不是bug。就列宽而言，我们对具有 flex-wrap:wrap 而没有集合 height 的弹性列容器有什么期望？
因为正确的行为可能是尽可能地缩小列。
错误在于它在不同的上下文中呈现不同。无论正确的行为是什么，都应该是一致的。