세로스크롤은 웹 페이지나 특정 요소의 콘텐츠가 화면에 다 보여지지 않을 때, 사용자에게 위아래로 스크롤할 수 있는 기능을 제공하여 나머지 콘텐츠를 볼 수 있게 하는 기능입니다.
overflow: scroll;
overflow: scroll;는 콘텐츠가 네모 박스의 높이보다 클 때 스크롤을 가능하게 합니다.
가로스크롤은 웹 페이지나 특정 요소의 콘텐츠가 화면에 다 보여지지 않을 때, 사용자에게 좌우로 스크롤할 수 있는 기능을 제공하여 나머지 콘텐츠를 볼 수 있게 하는 기능입니다.
overflow-x: scroll;
overflow-x: scroll;는 콘텐츠가 네모 박스의 너비를 초과할 때 가로 스크롤을 가능하게 합니다.
가로 스크롤 컨테이너가 있을 때 자식 요소들이 찌그러지는 문제는 flex-shrink 속성으로 해결할 수 있습니다.
이 문제는 자식 요소가 컨테이너의 크기에 맞게 줄어들면서 발생합니다.
flex-shrink: 0; /* 부모가 flex일 때, 나는 찌그러지지 않을거야! */
flex-shrink: 0; 속성은 자식 요소가 줄어들지 않도록 설정합니다. 즉, 자식 요소는 지정된 크기 이상으로 줄어들지 않고, 지정된 크기를 유지하려고 합니다.
오른쪽 그림처럼, 내부 요소가 부모 요소의 크기에 따라 축소되지 않습니다.