javascript - Push elements down to fill up remaining vertical space

Question

quick rundown of code before I ask question (Im using Material UI in react)

this is a container that should just hold chat messages

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;

this is a component to send things in this case a chat message

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;

this is how im rendering them together

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

here is what the screen looks like https://gyazo.com/d96744d356ceef81aa06345f0f0c2304

what I want is the ChatContainer to fill up the whitespace and push the input to the bottom of the screen. any help would be appreciated thx

question from:https://stackoverflow.com/questions/65943588/push-elements-down-to-fill-up-remaining-vertical-space

Answer 1

There are multiple ways to achieve this. This question has many of them. I use flexbox approach which is given that answer.

Make the height of root item (Box) 100vh to fill all screen, make it flex, and set its direction as column to show child items vertically.

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

Make marginTop property of last item auto to push it bottom.

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

View at codesandbox.