flex를 수평으로 감싸기 위해 그리드의 열을 사용하는 방법은 무엇입니까?

Question

https://codepen.io/itaied246/pen/eYbOWjm

공간을 가로로 채우고 아래로 스크롤하는 세로 스크롤 기능을 갖춘 플렉스박스를 성공적으로 만들었습니다.

수평에서도 동일한 작업을 수행하고 싶습니다. 즉, 공간을 수직으로 채우고 오른쪽으로 스크롤합니다.

내 flex div는 max-content가 있는 해당 grid 안에 있습니다.

내가 놓친 게 무엇입니까?

Answer 1

플렉스박스에 높이를 설정해야 합니다. 이 경우 .flex-columns 클래스에 height: 400px를 추가하면 문제가 해결됩니다.

그 이유는 Flexbox가 가능한 한 키가 클 수 있다고 가정하고 Flex 방향이 열로 설정되어 있으므로 모든 것을 하나의 열에 넣기 때문입니다. Flexbox가 행일 때 시각화하기가 더 쉽습니다!