英文:
Flex-grow not working Tailwind React h-screen
问题
Here is the translated code portion you provided:
所以我有一个包含子组件的组件，一开始它运行得很好，但当组件不断增加时，它不是将底部推开，而是与底部组件重叠，导致出现如下错误：
[![在此输入图片描述][1]][1]
如您所见，它堆叠在底部并重叠在其上....
这是我的尝试：
<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>{" "}
<
<details>
<summary>英文:</summary>
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:
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/ju5eg.png
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....
</details>
# 答案1
**得分**: 1
使用 `flex-1` 而不是 `flex-grow`。
尝试 [Tailwind-play](https://play.tailwindcss.com/ehESv4O6tb)。
我已经添加了页脚，现在您不会看到任何溢出。
<details>
<summary>英文:</summary>
Use `flex-1` instead of `flex-grow`
Try [Tailwind-play](https://play.tailwindcss.com/ehESv4O6tb)
I have added the footer, and now you dont see any overflow.
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论