如何让div随着页面的增长和收缩而增长或收缩

Question

当我抓取并拉伸页面时，div 不会一起增长。也许是因为我固定了大小，但我不确定如何为此修改代码。我将当前尺寸保存为 1920x1080 分辨率。

和

${props => props.theme.FlexCol};

display: flex;

，

flex-direction:column

和

${props => props.theme.FlexRow};

是

flex-direction:row

.

//main page//

import React from 'react';
import styled from 'styled-components';
import DashBoardCards from '../../components/adminDashBoard/DashBoardCards';
import DashBoardStatus from '../../components/adminDashBoard/DashBoardStatus';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import CateGory from '../../components/adminDashBoard/CateGory';
import DashBoardNotification from '../../components/adminDashBoard/DashBoardNotification';

// npm install react-slick
// npm install slick-carousel
export default function AdminDashBoard() {
  return (
    <Container>
      <CateGory />
      <EquipementWarpper>
        <EquipementSlider {...settings}>
          <DashBoardCards />
          <DashBoardCards />
          <DashBoardCards />
          <DashBoardCards />
          <DashBoardCards />
          <DashBoardCards />
        </EquipementSlider>
      </EquipementWarpper>

      <DashBoardStatusContainer>
        <DashBoardStatus />
        <DashBoardStatus />
        <DashBoardStatus />
        <DashBoardStatus />
        <DashBoardNotification />
      </DashBoardStatusContainer>
    </Container>
  );
}

const DashBoardStatusContainer = styled.div`
  border: 1px solid black;
  ${props => props.theme.FlexCol};
  flex-wrap: wrap;
  width: 100%;
  max-width: 48.75rem;

  height: 23.8125rem;
  gap: 20px;
  margin-left: 3.125rem;
  margin-top: 5.875rem;

  margin-right: 0;
`;

const EquipementWarpper = styled.div`
  ${props => props.theme.FlexCol};
  ${props => props.theme.wh100};
  max-height: 18.1875rem;
  max-width: 99.375rem;
  min-width: 75rem;

  margin-left: 3.125rem;
`;

const Container = styled.div`
  ${props => props.theme.wh100};
  ${props => props.theme.FlexCol};
  border: 1px solid red;
`;

const EquipementSlider = styled(Slider)`
  white-space: nowrap;
`;

const settings = {
  dots: false,
  infinite: false,
  speed: 100,
  slidesToShow: 5,
  slidesToScroll: 4,
};

从现在开始的所有组件：

import React from 'react';
import styled from 'styled-components';

export default function DashBoardCards() {
  return (
    <EquipementTypeContainer>
      <EquipementTypeBox>
        <EquipementType>
          <EquipementTypeImage />
          <EquipementTypeTitle>모니터</EquipementTypeTitle>
          <EquipementTypeTotalContainer>
            <TypeTotal>총수량</TypeTotal>
            <Total>50개</Total>
          </EquipementTypeTotalContainer>
          <EquipementTypeStatusContainer>
            <EquipementTypeUsingContainer>
              <TypeUsing>사용중</TypeUsing>
              <Using>30개</Using>
            </EquipementTypeUsingContainer>
            <EquipementTypeRepairContainer>
              <TypeRepair>수리 중</TypeRepair>
              <Repair>12개</Repair>
            </EquipementTypeRepairContainer>
            <EquipementTypeStockContainer>
              <TypeStock>
                재고량
                <Stock>6개</Stock>
              </TypeStock>
            </EquipementTypeStockContainer>
          </EquipementTypeStatusContainer>
        </EquipementType>
      </EquipementTypeBox>
    </EquipementTypeContainer>
  );
}

const EquipementTypeContainer = styled.div`
  border: 1px solid red;
  ${props => props.theme.FlexCol};
  width: 16.875rem;
  height: auto;
  min-height: 18.1875rem;
  background-color: white;
  box-shadow: 0.2314rem 0.2314rem 1.1571rem rgba(0, 0, 0, 0.1);
  border-radius: 0.4628rem;
  align-items: flex-start;
  margin-bottom: 1.5625rem;
`;

const EquipementTypeBox = styled.div`
  width: 12.9375rem;
  height: 14.25rem;
  margin-left: 1.9375rem;
  margin-top: 2.125rem;
`;

const EquipementType = styled.div`
  width: 3.9375rem;
  height: 6.5rem;
`;

const EquipementTypeImage = styled.div`
  background-color: green;
  width: 3.9375rem;
  height: 3.9375rem;
`;

const EquipementTypeTitle = styled.p`
  font-size: 1.47rem;
  font-weight: 700;
  line-height: 1.2rem;
  margin-top: 1.2419rem;
`;

const EquipementTypeStatusContainer = styled.div`
  ${props => props.theme.FlexRow};
  align-items: center;
  margin-top: 1.1563rem;
  width: 12.9375rem;
  height: 3.1875rem;
`;

const EquipementTypeUsingContainer = styled.div`
  width: 2.8125rem;
  height: 3.1875rem;
`;
const TypeUsing = styled.span`
  ${props => props.theme.FlexCol};
  align-items: flex-start;
  margin-right: 1rem;
  margin-bottom: 0;
  color: ${props => props.theme.color.grey.brandColor7};
  font-size: 1.0625rem;
  line-height: 1.25rem;
  width: 2.8125rem;
  height: 1.25rem;
`;

const Using = styled.p`
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5rem;
  color: black;
  margin-top: 0;
`;

const EquipementTypeRepairContainer = styled.div`
  gap: 0.375rem;
  width: 3.0625rem;
  height: 3.125rem;
  margin-left: 2rem;
`;

const TypeRepair = styled.span`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 3.0625rem;
  height: 1.25rem;
  margin-top: 0;
  font-size: 1.0625rem;
  line-height: 1.25rem;
  color: ${props => props.theme.color.grey.brandColor7};
`;

const Repair = styled.p`
  margin: 0 0.3125rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5rem;
`;

const EquipementTypeStockContainer = styled.div`
  width: 3.0625rem;
  height: 3.125rem;
  margin-left: 2rem;
`;

const TypeStock = styled.span`
  ${props => props.theme.FlexCol};
  margin-top: 0;
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.25rem;
  text-align: center;
  color: ${props => props.theme.color.grey.brandColor7};
`;

const Stock = styled.p`
  margin: 0 0.3125rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5rem;
  color: black;
`;

const EquipementTypeTotalContainer = styled.div`
  display: flex;
  margin-top: 1.9375rem;
`;

const TypeTotal = styled.span`
  ${props => props.theme.FlexRow};
  align-items: center;
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.25rem;
  color: ${props => props.theme.color.blue.brandColor6};
`;

const Total = styled.p`
  margin: 0 5px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5rem;
  color: ${props => props.theme.color.blue.brandColor6};
`;

import React from 'react';
import styled from 'styled-components';

export default function DashBoardNotification() {
  return (
    <DashBoardNotificationContainer>
      <NotificationContainer>
        <NotificationBox>
          <Notification>
            <NotificationImage />
            <NotificationTextContainer>
              <NotificationText>
                김은지님이 카메라 수리를 요청하였습니다
              </NotificationText>
              <NotificationDate>2023. 03 14 (화) 오전 11:13</NotificationDate>
            </NotificationTextContainer>
          </Notification>
        </NotificationBox>
      </NotificationContainer>
    </DashBoardNotificationContainer>
  );
}

const NotificationDate = styled.p`
  width: 11rem;
  height: 1.125rem;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.125rem;

  margin-top: 0;
  color: ${props => props.theme.color.grey.brandColor5};
  white-space: nowrap;
`;

const NotificationText = styled.p`
  width: 100%;
  max-width: 286px;
  height: 100%;
  max-height: 20px;
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.25rem;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
`;

const NotificationTextContainer = styled.div`
  ${props => props.theme.FlexCol};
  border: 1px solid blue;
  align-items: flex-start;
  padding: 0px;

  width: 286px;
  height: 44px;
`;

const NotificationImage = styled.div`
  width: 3rem;
  height: 3rem;
  border-radius: 0.375rem;
  background-color: green;
`;

const Notification = styled.div`
  border: 1px solid red;
  ${props => props.theme.FlexRow};

  gap: 23px;
  width: 357px;
`;

const NotificationBox = styled.div`
  border: 1px solid red;
  padding: 0px;
  gap: 23px;
  width: 631px;
  height: 65px;
`;

const NotificationContainer = styled.div`
  ${props => props.theme.FlexCol};
  border: 1px solid red;
  align-items: flex-start;
  padding: 0px;

  max-width: 631px;
  height: 313px;
  margin-left: 32px;
  margin-top: 34px;
`;

const DashBoardNotificationContainer = styled.div`
  ${props => props.theme.FlexCol};
  align-items: flex-start;
  background: #ffffff;
  width: 100%;
  max-width: 695px;
  height: 100%;
  max-height: 381px;
  margin: auto;
  border: 0.9264px solid #e3e3e3;
  box-shadow: 0.2314rem 0.2314rem 1.1571rem rgba(0, 0, 0, 0.1);
  border-radius: 7.4048px;
`;

import React from 'react';
import styled from 'styled-components';

export default function CateGory() {
  return (
    <CategoryContainer>
      <Category>비품 카테고리</Category>
    </CategoryContainer>
  );
}

const CategoryContainer = styled.div`
  ${props => props.theme.FlexRow};
  align-items: flex-start;
  border: solid 1px red;
  margin-top: 4.875rem;
  margin-bottom: 1.5rem;
  width: 8.5625rem;
  height: 1.5rem;
`;

const Category = styled.div`
  width: 6.8125rem;
  height: 1.5rem;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.5rem;
  padding: 0px;
  gap: 4px;
  color: ${props => props.theme.color.blue.brandColor7};
`;

import React from 'react';
import styled from 'styled-components';

export default function DashBoardStatus() {
  return (
    <DashBoardStatusBox>
      <EquipmentRequestContainer>
        <EquipmentRequestBox>
          <EquipmentRequest>비품요청</EquipmentRequest>
          <Request>6건</Request>
        </EquipmentRequestBox>
        <RequestDateBox>
          <RequestDate>2023.03.13업데이트</RequestDate>
        </RequestDateBox>
      </EquipmentRequestContainer>
    </DashBoardStatusBox>
  );
}

const RequestDate = styled.p`
  color: ${props => props.theme.color.grey.brandColor5};
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.1875rem;
  text-align: center;
  margin-top: 0;
`;

const RequestDateBox = styled.div`
  width: 4.5rem;
  height: 2.375rem;
`;

const Request = styled.p`
  font-weight: 600;
  font-size: 2.75rem;
  line-height: 3.3125rem;
  margin-top: 0;
`;

const EquipmentRequest = styled.p`
  width: 4.6875rem;
  height: 1.5rem;
  margin-top: 0;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.5rem;
`;

const EquipmentRequestBox = styled.div`
  ${props => props.theme.FlexCol};
  align-items: center;
  padding: 0rem;
  gap: 0.875rem;
  width: 4.6875rem;
  height: 5.6875rem;
`;
const EquipmentRequestContainer = styled.div`
  ${props => props.theme.FlexCol};
  ${props => props.theme.FlexCenter};
  gap: 1.5rem;
  padding: 1rem;
`;

const DashBoardStatusBox = styled.div`
  border: 1px solid red;
  ${props => props.theme.FlexCol};
  ${props => props.theme.FlexCenter};
  width: 100%;
  max-width: 11.25rem;
  height: 100%;
  max-height: 23.8125rem;

  box-shadow: 0.2314rem 0.2314rem 1.1571rem rgba(0, 0, 0, 0.1);
  border-radius: 0.4628rem;
`;

我试图重新创建它，但我做不到。