
[개발용어사전] CSS: fit-content와 overflow-x: scroll
토이프로젝트
2021. 8. 4. 15:27
프론트 파트를 담당하고 진행하면서, 리액트나 타입스크립트 때문이 아니라 CSS 때문에 골치가 아팠다. body에서 지정한 width를 넘어갔을 때 저렇게 각자가 원래 가져야 할 width가 무너졌고, 다음 줄로 넘어가게 해야 했는데 그냥 끝없이 width를 먹어가면서 길어졌었다. 사용자 입장에서 보면 누가 저렇게 바뀌는 걸 좋아할까 싶었다. 그래서 CSS를 찾아봤고, 두 가지 결론에 도달했다. 1. min-width: fit-content 이 성질을 li 태그에 주고 나서 아무리 길어져도 본래의 li 태그 각각이 가지는 width 성질을 그대로 보존할 수 있게 되었다. 길게 쓰려면 쓸수야 있겠으나, mozilla에 잘 설명되어 있으므로 따로 설명하지 않고 넘어간다. 2. overflow: x-scroll..