向下推元素以填充剩余的垂直空间

大佬教程收集整理的这篇文章主要介绍了向下推元素以填充剩余的垂直空间，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决向下推元素以填充剩余的垂直空间？

在我提问之前快速总结代码（我在 React 中使用 Material UI）

这是一个容器，应该只保存聊天消息

const chatContainer = ({ chatmessages }) => {
  const classes = useStyles();

  return (
    <Paper classname={Classes.chatContainer}>
      {Chatmessages.map((msg) => (
        <Chatmessage key={msg.ID} author={msg.author} content={msg.content} />
      ))}
    </Paper>
  );
};

export default ChatContainer;

这是一个在这种情况下发送聊天消息的组件

const sendinput = ({ label,onsubmit }) => {
  const [inputValue,seTinputValue] = useState("");
  const classes = useStyles();

  const handleChange = (E) => seTinputValue(e.target.value);

  const handlesubmit = (E) => {
    e.preventDefault();
    onsubmit(inputvalue);
    seTinputValue("");
  };

  return (
    <form onsubmit={(E) => handlesubmit(E)}>
      <TextFIEld
        label={label}
        placeholder={label}
        variant="outlined"
        value={inputvalue}
        onChange={handleChangE}
        fullWIDth
        inputProps={{
          endAdornment: (
            <>
              <divIDer orIEntation="vertical" classname={Classes.divIDer} />
              <Iconbutton type="submit">
                <SenDicon color="priMary" />
              </Iconbutton>
            </>
          ),}}
      />
    </form>
  );
};

export default sendinput;

这就是我将它们渲染在一起的方式

    <Box>
      <ChatContainer chatmessages={Chatmsgs} />
      <sendinput label="Send message" onsubmit={handlesubmit} />
    </Box

这是屏幕的样子@R_696_10107@s://gyazo.com/d96744d356ceef81aa06345f0f0c2304

我想要的是 ChatContainer 来填充空白并将输入推送到屏幕底部。任何帮助将不胜感激 thx

解决方法

const useStyles = makeStyles({
  root: {
    display: "flex",flexDirection: "column",height: "100vh"
  }
});

export default function App() {
  const classes = useStyles();

  const handleSubmit = console.log;

  return (
    <Box className={Classes.root}>
      <ChatContainer chatmessages={Chatmsgs} />
      <SendInput label="Send message" onSubmit={handleSubmit} />
    </Box>
  );
}

const useStyles = makeStyles({
  root: {
    marginTop: "auto"
  }
});

const SendInput = ({ label,onSubmit }) => {
  const classes = useStyles();
  
  // removed for simplicity

  return (
    <form onSubmit={(E) => handleSubmit(E)} className={Classes.root}>
      {/* removed for simplicity */}
    </form>
  );
};