I am currently working on centering the boxes within my design, which I want to occupy 80% of the height of their parent component. One issue I am facing is that when I adjust the height of the browser window, the content inside the boxes also changes its height accordingly. While I understand this behavior is due to the 80% height setting, I'm not sure how to ensure that the content adjusts along with the parent height and adds scrollbars when necessary.
The dynamic nature of the content based on height changes is causing issues throughout the entire webpage layout. Should I consider using a fixed pixel height instead of relying on viewport height units?
For reference, here is an example of the code I am using with Chakra UI:
import { Box } from "@chakra-ui/react";
import React from "react";
const Practice = () => {
return (
<Box height={"100vh"} alignItems={"center"} display={"flex"} gap={"20px"}>
<Box
width={"200px"}
height={"80%"}
border={"2px"}
borderColor={"black"}
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
>
box1
</Box>
<Box
width={"200px"}
height={"80%"}
border={"2px"}
borderColor={"black"}
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
>
box2
</Box>
<Box
width={"200px"}
height={"80%"}
border={"2px"}
borderColor={"black"}
display={""flex""}
justifyContent={""center""}
alignItems={""center""}
>
box3
</Box>
<Box
width={"200px"}
height={"80%"}
border={"2px"}
borderColor={"black"}
display={"flex"}
justifyContent={"center"}
alignItems={"center"}
>
box4
</Box>
</Box>
);
};
export default Practice;