flex안의 요소가 눌리는 현상

flex에서 아이템은 width값을 주어도, 화면이 줄어들면 width를 무시하고 줄어든다.

브라우저 가로 길이를 줄이면 박스가 알아서 줄어드는 것을 확인할 수 있다.

이는 flex-shink의 기본값이 '1' 줄어듦이기 때문이다. 크기를 유지하고 싶다면 0을 사용해야한다.

flex-shrink: 0; 을 추가해주었더니 해결되었다.

flex-shrink: 0;