창이 너무 짧으면 Flexbox 항목이 컨테이너를 넘치게 되고 사이드바가 하단 정렬을 유지할 수 없습니다.
헤더, 2x2 콘텐츠 그리드, 사이드바로 구성된 간단한 플렉스 레이아웃을 사용하려고 합니다. 창의 너비가 특정 크기보다 작을 경우 사이드바가 화면 하단으로 이동해야 합니다.
현재 해당 크기에 도달하면 창 높이를 너무 작게 설정하면 그리드 내용이 헤더 위에 겹쳐지는데 왜 이런 일이 발생하는지 모르겠습니다. 화면은 뷰 높이의 크기여야 하지만 사이드바를 움직이면 화면이 확장됩니다.
으아악이것은 jsfiddle의 전체 코드입니다
(제목 위에 그리드가 어떻게 겹치는지 확인하려면 창 크기를 조정하세요)
