[CSS] overflow-x 적용시 컨텐츠가 짤리는 현상

아래는 데이터를 담은 배열이다. 

 const stepFourCarousel = [
    {
      title: "2004",
      url: step2Image8,
      width: 276,
      height: 355,
      desc: [
        "안전한 화장품을 위한 아로마티카의 시작",
        "No, 미네랄오일 & 실리콘 - 아로마테라피롤온, 마사지 오일 출시",
        "Free 파라벤 & 실리콘 - 로즈 스킨케어 라인 출시",
      ],
    },
    {
      title: "2005",
      url: step2Image9,
      width: 276,
      height: 257,
      desc: [
        "기업 부설 연구소 설립",
        "천연 방부제 특허 취득",
        "Free 실리콘 & 설페이트 - 샴푸 출시",
        "Free 합성향 - 페이셜 미스트 출시",
      ],
    },
    {
      title: "2010",
      url: step2Image10,
      width: 276,
      height: 215,
      desc: [
        "Free PEG & 페녹시에탄올 - 알로에 베라 젤 출시",
        "EWG Skindeep 전성분 등재",
      ],
    },
    {
      title: "2011",
      url: step2Image2011,
      width: 276,
      height: 215,
      desc: [
        "EWG '안전한 화장품 챔피언' 수상",
        "ECOCEPT '유기농 화장품 제조 시설' 인증",
        "Free 실리콘 - 무기자차 선크림 출시",
      ],
    },
    {
      title: "2015",
      url: step2Image2015,
      width: 276,
      height: 215,
      desc: ["Vegan society 파트너 등록", "선 스크린 라인, 미국 FDA OTC 등록"],
    },
    {
      title: "2016",
      url: step2Image2016,
      width: 276,
      height: 215,
      desc: [
        "EWG 베스트 선크림 선정",
        "EWG VERIFIED 인증 획득 (33개 품목)",
        "Free향로 - 비건 여성 청결제 출시 수축필름 전면중시",
      ],
    },
    {
      title: "2019",
      url: step2Image2019,
      width: 276,
      height: 215,
      desc: [
        "에코 프랜들리 스마트 팩토리 설립",
        "COSMOS 유기농 인증 획득",
        "UN GLOBAL COMPACT 가입",
      ],
    },
    {
      title: "2020",
      url: step2Image7,
      width: 276,
      height: 257,
      desc: [
        "100% PCR 용기 제품 출시",
        "국내 뷰티 브랜드 최초 리필 스테이션 오픈",
      ],
    },
    {
      title: "2020",
      url: step2Image7,
      width: 276,
      height: 257,
      desc: [
        "100% PCR 용기 제품 출시",
        "국내 뷰티 브랜드 최초 리필 스테이션 오픈",
      ],
    },
    {
      title: "2020",
      url: step2Image7,
      width: 276,
      height: 257,
      desc: [
        "100% PCR 용기 제품 출시",
        "국내 뷰티 브랜드 최초 리필 스테이션 오픈",
      ],
    },
    {
      title: "2020",
      url: step2Image7,
      width: 276,
      height: 257,
      desc: [
        "100% PCR 용기 제품 출시",
        "국내 뷰티 브랜드 최초 리필 스테이션 오픈",
      ],
    },
    {
      title: "2020",
      url: step2Image7,
      width: 276,
      height: 257,
      desc: [
        "100% PCR 용기 제품 출시",
        "국내 뷰티 브랜드 최초 리필 스테이션 오픈",
      ],
    },
  ];

 

아래는 프론트 소스 코드이다. 

 return (
    <Stack height={1100} direction={"row"}>
      <Stack flex={1} justifyContent={"center"} px={"112px"} width={"100%"}>
        <MainTitleTypograpy title="History" mb={"27px"}></MainTitleTypograpy>
        <BrandSubitleTypograpy
          title="클린 앤 비건 뷰티,"
          fontSize={"20pt"}
          lineHeight={"28pt"}
        ></BrandSubitleTypograpy>
        <BrandSubitleTypograpy
          title="아로마티카가 걸어온 길"
          fontSize={"20pt"}
          lineHeight={"28pt"}
          letterSpacing={"25"}
        ></BrandSubitleTypograpy>
      </Stack>

      <Stack
        mt={"230px"}
        justifyContent={"center"}
        direction={"row"}
        sx={{ flexWrap: "nowrap", overflowX: "scroll" }}
        spacing={"31px"}
      >
        {stepFourCarousel.map((content) => (
          <Stack flex={"0 0 auto"} mr={"31px"} width={content.width}>
            <MainTitleTypograpy
              title={content.title}
              fontWeight={"bold"}
              color="#112b23"
              mb={10}
            ></MainTitleTypograpy>
            <img
              src={content.url}
              width={content.width}
              height={content.height}
            />

            {content.desc.map((description) => (
              <li
                style={{
                  fontFamily: "KoPubWorldDotumPM",
                  lineHeight: "32px",
                }}
              >
                {description}
              </li>
            ))}
          </Stack>
        ))}
      </Stack>
    </Stack>
  );

 

 

overflow-x : scroll을 적용해도 컨텐츠가 다 보이지 않는 현상이 발생했다.

 

 

2004년 데이터는 보이지않고 2015년도 부터 보였다..  

 

왜 2015년 이전 데이터는 짤려서 안보이는 건가? 

 

처음엔 overflow-x에도 최대 범위가 있는 건가 한참을 찾았다.

 

 

 

우선 원인은 아래와 같다.

flex justifyContent={"center"}

justifyContent center속성이 전체 width를 기준으로 잡아버려서 2004가 History 컴포넌트에 가려서 보이지 않았다. 

속성을 제거해주었더니 정상적으로 동작한다. 

 

이제야 잘 동작한다.