[CSS] flex-shrink 속성 이해하기

<ImgNutritionalWrap>
  <Img src={info.src} alt="" />
  <Nutritional>
    dd
  </Nutritional>
</ImgNutritionalWrap>

const ImgNutritionalWrap = styled.div`
  width: 160px;
  display: flex;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  /* 스크롤바 제거 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  &::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }
`;

const Img = styled.img`
  width: 100%;
  height: auto;
  border-radius: 12px;
  scroll-snap-align: start;
`;

const Nutritional = styled.div`
  width:100%;
  height:auto;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  background-color:red;
  scroll-snap-align: start;
`

flex는 기본적으로 부모 요소의 가용 너비를 기준으로 줄어든다.

이 때 이미지는 예외적으로 자신의 기본 크기를 유지하려고한다.

따라서 <Nutrition/>은  flex-shrink가 1일 때는 최소 크기, 0일 때는 설정한 너비(width:100%)를 적용받아 160px이 적용된다. 

 

아니요, 그런 방식으로 동작하지 않습니다. ImgNutritionalWrap, Img, 그리고 Nutritional이 모두 160px 너비를 가지고 있기 때문에 너비 부족으로 인해 Nutritional에서 차감되는 것이 아닙니다. Flexbox와 레이아웃 규칙에 따라 요소들이 배치되는 방식은 조금 다릅니다. 아래에서 상세히 설명하겠습니다.

---

🔍 현재 구조와 동작 방식

1. ImgNutritionalWrap의 너비: 160px
   • 부모 요소인 Container의 너비가 160px로 고정되어 있으므로, ImgNutritionalWrap의 width: 100%는 160px로 설정됩니다.
2. Img와 Nutritional의 너비: 100%
   • Img와 Nutritional은 ImgNutritionalWrap의 자식이고, 각각 width: 100%로 설정되어 있습니다.
   • 따라서 두 요소는 각각 160px 너비를 차지합니다.
3. Flexbox의 기본 동작
   • ImgNutritionalWrap의 display: flex로 인해, 자식 요소(Img와 Nutritional)는 Flexbox의 규칙에 따라 배치됩니다.
   • 기본적으로 flex는 flex-direction: row이고, 자식 요소는 수평으로 나란히 배치됩니다.
4. 너비 초과 상황
   • Img와 Nutritional이 둘 다 160px 너비를 차지하려고 하지만, 부모(ImgNutritionalWrap)의 너비는 160px로 제한되어 있습니다.
   • 따라서 요소들이 수평으로 나란히 배치되며 너비가 초과하게 됩니다.
   • 이 경우, ImgNutritionalWrap의 overflow-x: auto 속성에 의해 수평 스크롤이 활성화됩니다.

---

🔍 Flexbox 레이아웃 동작 정리

• Flexbox에서 자식 요소가 width: 100%로 설정되면 부모의 가용 너비를 기준으로 각 자식 요소의 너비가 결정됩니다.
• 자식 요소가 부모의 너비를 초과할 경우:
  • **flex-shrink가 기본값(1)**이면 요소가 축소됩니다.
  • **flex-shrink: 0**으로 설정된 경우 요소는 축소되지 않고 부모의 너비를 초과하며 스크롤이 발생합니다.

---

🔧 현재 상황에서 부족한 너비가 Nutritional에서 차감되는지?

정답: 그렇지 않다

• Img와 Nutritional 모두 Flexbox에서 기본적으로 축소되지 않고, 부모(ImgNutritionalWrap)의 가용 너비를 초과하게 됩니다.
• 너비 부족으로 인해 특정 요소가 너비를 차감당하지 않고, ImgNutritionalWrap의 overflow-x: auto 속성에 의해 수평 스크롤이 활성화됩니다.

---

💡 문제를 해결하려면?

만약 Img와 Nutritional이 동시에 부모의 가용 너비를 차지하지 않고 수직으로 배치되길 원한다면, 다음과 같이 flex-direction: column을 설정해야 합니다.

수정 코드:

const ImgNutritionalWrap = styled.div`
  width: 160px; /* 부모 너비 고정 */
  display: flex;
  flex-direction: column; /* 자식 요소를 수직으로 배치 */
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  &::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }
`;

수정 결과:

• Img와 Nutritional이 수직으로 배치되어 부모의 너비를 초과하지 않습니다.
• 따라서 수평 스크롤도 발생하지 않습니다.

---

💡 다른 해결 방법: Flexbox 축소 활성화

flex-shrink를 활성화하여 요소를 축소하도록 설정할 수도 있습니다.

수정 코드:

const Img = styled.img`
  width: 100%;
  flex-shrink: 1; /* 축소 가능 */
  height: auto;
  border-radius: 12px;
`;

const Nutritional = styled.div`
  width: 100%;
  flex-shrink: 1; /* 축소 가능 */
  display: flex;
  flex-direction: column;
  background-color: red;
`;

수정 결과:

• Img와 Nutritional은 Flexbox 축소 규칙에 따라 부모의 너비를 초과하지 않도록 자동으로 축소됩니다.

---

📌 결론

• 현재 레이아웃에서는 ImgNutritionalWrap의 너비를 초과한 만큼 수평 스크롤이 발생하는 것이지, 특정 요소가 너비를 차감당하지 않습니다.
• 문제를 해결하려면:
  1. flex-direction: column으로 설정하여 요소가 수직 배치되게 하거나,
  2. flex-shrink: 1로 설정하여 요소를 축소하도록 합니다.

궁금한 점이 있다면 추가로 물어보세요! 😊