[개발용어사전] CSS: fit-content와 overflow-x: scroll

프론트 파트를 담당하고 진행하면서, 리액트나 타입스크립트 때문이 아니라 CSS 때문에 골치가 아팠다.

body에서 지정한 width를 넘어갔을 때 저렇게 각자가 원래 가져야 할 width가 무너졌고, 다음 줄로 넘어가게 해야 했는데 그냥 끝없이 width를 먹어가면서 길어졌었다. 사용자 입장에서 보면 누가 저렇게 바뀌는 걸 좋아할까 싶었다. 그래서 CSS를 찾아봤고, 두 가지 결론에 도달했다.

 

1. min-width: fit-content

이 성질을 li 태그에 주고 나서 아무리 길어져도 본래의 li 태그 각각이 가지는 width 성질을 그대로 보존할 수 있게 되었다.

길게 쓰려면 쓸수야 있겠으나, mozilla에 잘 설명되어 있으므로 따로 설명하지 않고 넘어간다.

 

2. overflow: x-scroll

우선 저렇게 fit-content를 해주고 나서 body의 width를 넘어갔을 때 li 태그들의 width가 마음대로 바뀌는 것은 해결했으나, 한가지 문제가 더 있었다. 이는 값을 추가했을 때 body의 width를 넘어가면 다음 줄로 li 태그들을 옮기고 싶은데 그렇게 하는 방법을 모르겠다는 것이었다.

 

생각해보면 간단하다. ul 태그를 감싸는 div에 width를 설정해두고, ul 태그에도 width를 설정해둔 뒤에 ul 태그 내부의 li 태그에 float: left 설정을 주면 되는 것이었다. 근데 나는 요소들을 flex display 처리를 했었고, 그래서 어떻게 하더라도 다음 줄로 넘어갈 수가 없었다.

 

그래서 flex display 성질을 전부 지우고 각각에 아래와 같은 성질을 부여하였다.

HTML

        <div id="container2">
          <ul id="list_terms">{relatedTermsList}</ul>
        </div>

CSS

#container2 {
  width: 100%;
  overflow-x: scroll;
  padding-bottom: 30px;
}
#list_terms {
  width: 100%;
  padding: 0;
}
#list_terms > li {
  padding: 8px 12px;
  float: left;
  border-radius: 18px;
  font-weight: 500;
  min-width: fit-content;
  margin: 5px 5px 0px 0px;
  color: white;
  background-color: #7d68ff;
  list-style: none;
}

이렇게 해주니까 width를 넘기면 다음 줄로 넘어가긴 하는데 아래와 같이 옆에 있는 저장하기 버튼과 다른 개체로서의 구분이 제대로 되지 않았다. 그리고 div의 height도 제대로 잡히지 않았다.

이 문제는, ul 태그를 감싸는 container2 div에 overflow-x: scroll 성질을 줌으로써 해결할 수 있었다. overflow-x 성질은, x축의 길이가 정해진 width를 넘어갔을 때 어떻게 처리할지에 대한 성질이다. 이를 scroll로 설정한다면, 어떤 원리인지는 잘 모르겠는데 ul 태그가 높이와 그 영역을 갖게 되고 버튼과 구분이 된다.

이 부분은 좀더 생각을 해봐야겠다.