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

在我提问之前快速地运行代码（我在react中使用MaterialUI）

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

const ChatContainer=（{chatMessages}）=>{
const classes=useStyles（）；
返回(
{chatMessages.map（（msg）=>(
))}
);
};
导出默认容器；

这是一个组件，用于在本例中发送聊天信息

const SendInput=（{label，onSubmit}）=>{
常量[inputValue，setInputValue]=useState（“”）；
const classes=useStyles（）；
consthandlechange=（e）=>setInputValue（e.target.value）；
常量handleSubmit=（e）=>{
e、 预防默认值（）；
onSubmit（输入值）；
setInputValue（“”）；
};
返回(
handleSubmit（e）}>
);
};
导出默认输入；

这就是我如何将它们呈现在一起的方式

    <Box>
      <ChatContainer chatMessages={chatMsgs} />
      <SendInput label="Send message" onSubmit={handleSubmit} />
    </Box

实现这一点有多种方法。这其中有很多。我使用
flexbox
方法给出了答案

使根项目（框）的高度为100vh以填充所有屏幕，使其灵活，并将其方向设置为列以垂直显示子项目

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>
  );
}

查看。
通常使用
样式将某些内容固定到屏幕底部=“位置：固定；底部：0
。你考虑过在你的输入中使用这种风格吗？是的，这解决了一部分问题，但也许我应该重新表述一下我的问题。如果ChatContainer可以占用剩余的空间，那就太好了。在这种情况下，它将跨越搜索框和屏幕顶部之间的间隙。您可以尝试从SendInput中删除
marginTop:auto
，并将
height:100%
添加到ChatContainer的根元素中吗。查看。
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>
  );
};