[css] flex 아이템 스크롤 상단부분 가림 문제

안녕하세요,

오늘은 이런저런 라이브러리 테스트 도중 위와 같이 스크롤을 위 끝까지 올려도 상단의 텍스트가 잘리는 문제가 발생했습니다.

 

문제의 원인은 flex 속성 사용중에 아래 두 개의 스타일 때문입니다.

• align-items: center
• justify-content: center

위 스타일을 이용하면 flex item을 아주 쉽게 가운데 정렬 할 수 있습니다. 하지만 만약 item이 container의 크기를 벗어난다면

overflow 된 부분에 접근이 불가능 해지는 문제가 발생합니다.

 

이러한 문제를 해결하기 위해 "safe" 값을 추가할 수 있도록 했다고 하지만,

아직 여러 브라우저에서 지원을 하지 않는 모양입니다.

justify-content: safe center
align-self: safe center

 

따라서 위 문제는 margin을 이용해 해결하는 편이 좋습니다.

<Wrapper>
    <Content>
      {front}
    </Content>
</Wrapper>

만약 위와 같은 구조의 html이 있다면 스타일 속성을 아래와 같이 주면 됩니다.

export const Wrapper = styled.div`
  width: 100%;
  height: 100%;
  font-weight: bold;
  overflow-y: auto;
  text-overflow: ellipsis;

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

export const Content = styled.div`
  margin: auto;
`

간단히 설명을 드리자면 부모요소에 justity-content, align-items값을 center로 만든 뒤 아래 별도의 태그로 마진을 auto로 설정하는 겁니다. 그러면 아래와 같이 끝부분까지 잘 나오는 것을 확인할 수 있습니다.