Flex-grow not working Tailwind React h-screen - reactjs

Question

So i have an component with child inside the div component, it works fine at first but when the component keep increasing, instead of pushing the the footer the component overlapping the footer component causing an error like this:
as you can see it stack infront of the footer and overlapping it....
here is my try:
<div className="m-2 flex-grow">
<div className="flex flex-col md:flex-row md:justify-between">
<div className="flex">
<div
name=" grey window"
className="h-[130px] w-[130px] bg-[#d9d9d9]"
></div>
<div name="text" className="md :flex md:flex-col md:pt-0">
<div className="ml-2 text-left text-[#e44] md:text-xl text-base">
{props.props.sku_name}
</div>
<div className="md:text-l ml-2 text-left text-sm text-[#b4b4b4]">
{`Plant: ${props.props.plant}`}
</div>
<div className="md:text-l ml-2 text-left text-sm text-[#b4b4b4]">
{`SKU: ${props.props.sku}`}
</div>{" "}
<div className="md:text-l ml-2 text-left text-sm text-[#b4b4b4]">
{`Status: ${props.props.status}`}
</div>
<div className="md:text-l ml-2 text-left text-sm text-[#b4b4b4]">
{`Base Qty :${props.props.base_qty}, UOM: ${props.props.uom}`}
</div>
</div>
</div>
<div name="Buttons">
<div className="mt-2 flex gap-4 md:mt-0 md:flex-col">
<div className="rounded-md shadow">
<Button
variant="outlined"
size="medium"
color="error"
startIcon={<ContentCopyIcon />}
className="inline-flex items-center justify-center rounded-md border border-transparent w-32 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 "
>
Copy
</Button>
</div>
<div className="rounded-md shadow">
<Button
variant="outlined"
size="medium"
startIcon={<ModeEditIcon />}
color="warning"
className="inline-flex items-center justify-center rounded-md border border-transparent w-32 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700"
>
Edit
</Button>
</div>
</div>
</div>
</div>
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>
{/* <div className="bg-white">
<Box sx={{ width: "100%", typography: "body1" }}>
<TabContext
TabIndicatorProps={{ style: { background: "#FF0000" } }}
value={value}
index={0}
classes={{ root: useStyles.tab }}
>
<Box sx={{ borderColor: "divider", p: 0 }}>
<TabList
index={0}
classes={{}}
onChange={handleChange}
variant="scrollable"
scrollButtons="auto"
aria-label="scrollable auto tabs example"
>
<Tab label="BOM" value="1" />
<Tab label="Calculation" value="2" />
</TabList>
</Box>
<TabPanel style={{ padding: 2 }} value="1">
Calculation
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>{" "}
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>
<div>
<p>dsajfkhjkfhkjasdhfkjahsdfkasjhdkfjashdkgdfgsfhdhh</p>
</div>
</TabPanel>
<TabPanel value="2" style={{ padding: 2 }}>
Calculation
</TabPanel>
</TabContext>
</Box>
</div> */}
</div>
and here is where i actually call the component to be used and display where there is data on it:
<div className=" m-2 p-2 mr-2 bg-white h-screen ">
<div className="text-left pl-2 pb-4 font-bold text-3xl">
<h2>Find Material</h2>
</div>
<div className="p-2 align-left">
<form
className="flex items-center"
onSubmit={(e) => {
e.preventDefault();
dataSKUList();
}}
>
<Autocomplete
isOptionEqualToValue={(option, value) =>
option.value === value.value
}
style={{ width: "100%", color: "#ffffff" }}
onChange={(event, newValue) => {
handleSetSKU(newValue);
}}
id="grouped-demo"
options={options.sort(
(a, b) => -b.firstLetter.localeCompare(a.firstLetter)
)}
groupBy={(option) => option.firstLetter}
getOptionLabel={(option) =>
option.sku_name + `, code:(${option.sku})`
}
sx={{ width: 300 }}
renderInput={(params) => {
params.inputProps.onKeyDown = handleKeyDown;
return <TextField {...params} label="Search by SKU" required />;
}}
renderGroup={(params) => (
<ul key={params.key}>
<li>
<GroupHeader>{params.group}</GroupHeader>
<GroupItems>{params.children}</GroupItems>
</li>
</ul>
)}
/>
<div>
<Button
type="submit"
color="success"
variant="contained"
style={{
marginLeft: 10,
width: "100%",
height: 54,
}}
startIcon={<ContentPasteSearchIcon />}
>
Search
</Button>
</div>
</form>
</div>
<div className="bg-white scrollbar-hide">
{show ? (
<div className="h-full">
<CardCalculation props={dataSpec} />
</div>
) : (
<></>
)}
</div>
</div>
can someone pointing out where it potentially be the error and any help on how to fix it?...
i think it will the h-screen that causing the problem....

Answer 1

Use flex-1 instead of flex-grow
Try Tailwind-play
I have added the footer, and now you dont see any overflow.