FireFox에서 flex-wrap과 overflow의 호환성 부족 해결 사례

#aside .inner {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	overflow-y: auto; /* 문제의 원인 */

FireFox 문제 설명을 위한 flex 박스 배치도

 

"#aside .inner"는 flex 컨테이너이며, 2개의 박스 a와 b를 담고 있습니다. 컨테이너는 상하(y축) 스크롤됩니다.

"flex-wrap: wrap" 설정을 집어넣어 컨테이너의 폭이 여유가 있을 경우 가로로 2개의 박스를 배열하고, 폭이 좁을 경우 세로로 박스를 배열합니다.

 

MS Edge와 Google Chrome은 가로, 세로 배치가 정상으로 전환되지만, Mozilla FireFox는 세로로만 배열됩니다.

 

Microsoft Edge 버전 105.0.1343.42 (공식 빌드) (64비트)

Google Chrome 버전 105.0.5195.127(공식 빌드) (64비트)

FireFox for Desktop 100.0.2 (64-bit)

 

"overflow-y: scroll"로 문제 해결

 

Y축 스크롤 기능을 위한 코드 "overflow-y: auto"를 "overflow-y: scroll"로 변경하니까 박스의 가로와 세로 배치가 컨테이너 폭에 따라서 가변적으로 변경됩니다.

 

Flex 디스플레이가 웹 브라우저의 종류에 따라서 아직도 지원이 잘 안 되는 문제 중의 하나일 것입니다.

 

/* CSS Setting for FireFox */

display: flex;
flex-wrap: wrap;
overflow: scroll;