css flex 질문이요

생각해볼 수 있는 한가지 방법으로, flex의 shrink 속성에 대해 한번 살펴보시는 것을 추천드립니다. 간단한 설명에 앞서 제가 사용할 단어들을 먼저 정의하고 진행해보겠습니다. - container : flex 속성이 적용되어 있으며, 정렬할 요소를 감싸고 있는 외부 요소 - item : container 내부에서 정렬하고자 하는 요소들 Flex가 적용된 container의 주축 방향 길이의 합보다, item의 주축 방향 길이의 합과 gap의 길이가 더 길 경우, item들의 길이는 자동으로 줄어들게 됩니다. 질문자분의 예시로 확인해보자면, 전체를 감싸는 Flex가 적용된 "요소의 가로 길이"보다 "Nav 영역의 가로 길이"와 "Main 영역의 가로길이" 그리고 "그 사이의 gap"의 합이 더 크기 때문에, 각 요소들의 길이를 줄이게 되는 것입니다. 따라서 특정 요소의 길이를 줄이지 않게 하기 위해서, "이 길이 줄이지 마!"라는 CSS를 적용해야 하는데 이것을 위해 사용해야 하는 것은 flex-shrink 속성입니다. 질문자분의 문제상황을 해결하기 위해선, Nav의 속성에 flex-shrink: 0을 적용한다면 원하시는 UI를 구현할 수 있을 것 같습니다. 정확하게 사용하는 방법은 아래의 flex-shrink mdn을 참고하시고 사용해보시면 좋을 것 같습니다. (정확히 코드가 올라온 것이 아니기 때문에, 단순 추측으로 말씀드려 명쾌한 답변이 되지 않을 수 있다는 점 양해부탁드립니다) 추천 참고 자료: https://developer.mozilla.org/ko/docs/Web/CSS/flex-shrink