MUI组件窗口resize时重叠：如何让聊天框自适应收缩？

当前你的Chat组件中，聊天区域使用固定的70vh高度，输入框采用sticky定位，当窗口高度缩小到一定程度时，两者会出现重叠。要让聊天区域随窗口收缩、避免重叠，可通过以下两种方案实现：

方案一：Flex布局（推荐，自适应更强） #

利用Flex布局让容器垂直排列，聊天区域自动填充输入框以外的剩余空间，具体代码修改如下：

function Chat() {
  const chatBoxStyles = {
    bgcolor: "red",
    flexGrow: 1, // 占满容器剩余垂直空间
    mt: "1rem",
    overflowY: "auto" // 聊天内容过多时可滚动
  };
  const messageInputStyle = {
    mt: 1
  };
  return (
    <Container sx={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
      <Box sx={{ ...chatBoxStyles }}></Box>
      <TextField
        sx={{ ...messageInputStyle }}
        variant="outlined"
        margin="normal"
        required
        fullWidth
        id="messageInput"
        name="messageInput"
        autoFocus
      />
    </Container>
  );
}

关键修改点： #

• 给Container添加display: flex、flexDirection: "column"、minHeight: "100vh"，使其成为垂直方向的Flex容器并占满视口高度
• 聊天区域设置flexGrow: 1，自动填充输入框之外的剩余空间
• 移除输入框的sticky定位，Flex布局下输入框会自然固定在底部
• 给聊天区域添加overflowY: "auto"，确保内容过多时可滚动，避免溢出

方案二：使用calc计算动态高度 #

如果偏好固定高度的写法，可通过calc计算聊天区域的高度，减去输入框及间距的总高度：

function Chat() {
  const chatBoxStyles = {
    bgcolor: "red",
    height: "calc(100vh - 8rem)", // 根据输入框实际高度和间距调整数值
    mt: "1rem",
    overflowY: "auto"
  };
  const messageInputStyle = {
    mt: 1
  };
  return (
    <Container>
      <Box sx={{ ...chatBoxStyles }}></Box>
      <TextField
        sx={{ ...messageInputStyle }}
        variant="outlined"
        margin="normal"
        required
        fullWidth
        id="messageInput"
        name="messageInput"
        autoFocus
      />
    </Container>
  );
}

注意事项： #

需要根据输入框的实际高度（含margin、padding）调整calc中的数值，这种方式灵活性不如Flex布局，当输入框样式变化时需手动修改数值。

内容的提问来源于stack exchange，提问作者Newbee