[html/css] div 여러 개 가로 스크롤로 만들기

문제 발생

자식 div 여러개를 가로스크롤로 만드려고 했는데 부모 div에 width 속성과 overflow-x: scroll 을 주니 자꾸 페이지 전체에 스크롤이 생긴다.. 게다가 자식요소가 자꾸 크기가 줄어드는 문제가 발생 white-space 속성이나 display-wrap 속성을 모두 nowrap으로 해도 같은 문제가 발생했다.

해결 방법

간단하게 자식 요소에 min-width 와 min-height 을 설정해주면 된다.

css 코드

.x_scroll_parent{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
}

.x_scroll_child{
	min-width: 100px;
    min-height: 100px;
}