css - 表格顶部在大于 100vh 时消失

Question

我正在做一个 MERN 应用程序，我有这个问题..

我有一个模态窗口，在那个模态窗口里面我有一个表单，在那个表单中你可以添加输入，问题是当我有超过 3-4 个输入时，我的表单的一部分消失了，就像没有边距- 顶，看看图片。

在这里，一切都很棒

当我添加更多输入时，我的表单顶部会像这样消失

这是我的模态窗口的代码和所有这些东西

import React, { useState } from "react";

import {
  FormTasks,
  TheForm,
  FormContain,
  TitleForm,
  ContainInputs,
  Inputs,
  CloseIcon,
  ContainIcon,
  ContainStuff,
  AddIcon,
  MinusIcon
} from "./FormTodoStyled";

const FormTodo = ({ setShowForm }) => {
  const user = JSON.parse(localStorage.getItem("profile"));

  // const [numberInput, setNumberInput] = useState(1);

  const [inputsName, setInputsName] = useState([
    {
      task: ""
    }
  ]);

  const handleHideForm = () => {
    setShowForm(false);
    document.body.style = "overflow: auto";
  };

  const handleSubmit = e => {
    e.preventDefault();
  };

  const handleChange = (index, e) => {
    const valuesTask = [...inputsName];
    valuesTask[index][e.target.name] = e.target.value;
    setInputsName(valuesTask);
    console.log(inputsName);
  };

  const handleAdd = () => {
    setInputsName([...inputsName, { task: "" }]);
  };

  const handleLess = index => {
    const lessTasks = [...inputsName];
    lessTasks.splice(index, 1);
    setInputsName(lessTasks);
  };

  return (
    <FormTasks>
      <TheForm onSubmit={handleSubmit}>
        <ContainIcon>
          <CloseIcon onClick={handleHideForm} />
        </ContainIcon>
        <FormContain>
          <ContainStuff>
            <TitleForm>
              Hi {user?.result?.name} What Will You Do Today ?
            </TitleForm>
          </ContainStuff>

          {inputsName.map((inputName, index) => {
            return (
              <ContainInputs key={index}>
                <Inputs
                  type="text"
                  name="task"
                  placeholder="Write Your Task here"
                  maxLength="65"
                  value={inputName.task}
                  onChange={e => handleChange(index, e)}
                />
                <ContainStuff space>
                  <AddIcon onClick={handleAdd} />{" "}
                  <MinusIcon onClick={() => handleLess(index)} />
                </ContainStuff>
              </ContainInputs>
            );
          })}
        </FormContain>
      </TheForm>
    </FormTasks>
  );
};

export default FormTodo;

这是样式（我正在使用样式组件）

import styles, { css } from "styled-components";
import { CloseCircleOutline } from "@styled-icons/evaicons-outline/CloseCircleOutline";
import { AddToQueue } from "@styled-icons/boxicons-regular/AddToQueue";
import { Minus } from "@styled-icons/boxicons-regular/Minus";

// Form To Do

export const FormTasks = styles.div`

width: 100%;
min-height: 100vh;

background: rgba(0,0,0, 0.8);

overflow: auto;

position: fixed;
top:0;
bottom:0;
left:0;
right:0;

display: flex;
align-items: center;
justify-content: center;

z-index: 100;

`;

export const TheForm = styles.form`

width: 75%;

margin: 3rem 0rem;

background: rgba(0,0,0, 0.9);

border-radius: .7rem;

display: flex;
align-items: center;
justify-content: center;
flex-direction: column;

border: 1px solid white;

transition: .3s ease;

&:hover{
    box-shadow: .5px .5px 18px rgba(255,255,255);
}

`;

export const FormContain = styles.div`

width: 95%;
min-height: 80vh;

margin: 1rem 0rem;

display: flex;
align-items: center;
justify-content: center;
flex-direction: column;

`;

export const ContainIcon = styles.div`

width: 95%;

display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: row;

margin-top 1rem;

`;

export const CloseIcon = styles(CloseCircleOutline)`

color: white;

width: 40px;

cursor: pointer;

transform: scale(.9);
    
    transition: .3s ease;
    
    &:hover{
        transform: scale(1.1)
    }

`;

export const ContainStuff = styles.div`

width: 100%;
margin: 1rem 0rem;

${({ space }) =>
  space &&
  css`
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  `}

`;

export const TitleForm = styles.h2`

color: white;
font-size: 3.5rem;
font-weight: 400;

text-align: center;

padding: 2rem 1rem;

`;

export const AddIcon = styles(AddToQueue)`

color: rgba(139, 255, 203);

width: 30px;

cursor: pointer;

cursor: pointer;

transform: scale(.9);
    
    transition: .3s ease;
    
    &:hover{
        transform: scale(1.15)
    }

`;

export const MinusIcon = styles(Minus)`

color: rgba(255, 171, 165);

width: 30px;

cursor: pointer;

cursor: pointer;

transform: scale(.9);
    
    transition: .3s ease;
    
    &:hover{
        transform: scale(1.4)
    }

`;

export const ContainInputs = styles.div`

width: 70%;

margin: 1.5rem 0rem;

`;

export const Inputs = styles.input`

color: white;
font-size: 1.8rem;
font-weight: 200;

width: 100%;
padding: 1.2rem 1rem;
margin: 1.5rem 0rem;

border-bottom: 1px solid rgba(139, 255, 203);

border-top:none;
border-right:none;
border-left:none;
outline:none;
background:none;

`;

标签： cssreactjsstyled-components