reactjs Flex-grow不工作Tailwind React h型筛

所以我有一个div组件里面有子元素的组件，它一开始工作正常，但是当组件不断增加时，组件没有按下页脚，而是重叠页脚组件，导致如下错误：

正如你所看到的，它堆叠在页脚前面，并与页脚重叠......下面是我的尝试：

<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>

这里是我实际调用要使用的组件并显示其中有数据的位置：

<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>

有没有人能指出潜在的错误在哪里，以及如何修复它的帮助？...我认为这将是导致问题的h-screen。

reactjs Flex-grow不工作Tailwind React h型筛

1条答案

相关问题

热门标签

最新问答