[CSS] overflow : scroll 버그

display : flex 값을 가진 엘리먼트는 자식 요소로 인해 넘침이 일어나도 스크롤이 작동되지 않는다. 이 이유 자세히 설명해줘

 

display: flex;에서 스크롤이 동작하지 않는 이유

display: flex;를 가진 부모 요소에서 자식 요소가 넘쳐도 스크롤이 작동하지 않는 이유는 기본적인 Flexbox의 동작 방식 때문입니다.
즉, Flex 컨테이너는 기본적으로 자식 요소를 '압축'하지 않고, 오히려 컨테이너의 크기를 조절하려고 하기 때문입니다.

---

1. Flexbox는 기본적으로 컨테이너 크기를 조절한다.

Flexbox는 자식 요소가 넘칠 경우, 부모 컨테이너 크기를 늘리는 방식으로 배치합니다.
즉, 부모 요소는 자식 요소의 크기에 맞춰 확장되며, 스크롤이 발생하지 않습니다.

📌 예제 (스크롤이 안 되는 경우)

.parent {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
}

.child {
  height: 150vh; /* 부모보다 큰 높이를 가짐 */
  background-color: lightgray;
}

👆 이 경우 overflow-y: auto;가 있어도 스크롤이 작동하지 않습니다.
➡️ 이유는 부모 요소가 display: flex;를 가지면 기본적으로 자식 요소의 크기에 맞춰지기 때문입니다.
➡️ 즉, .parent의 높이가 100vh로 제한되었지만, .child가 150vh이면 부모가 따라 커지면서 스크롤이 생기지 않습니다.

---

2. overflow는 height를 초과할 때만 동작

overflow-y: auto;가 적용되려면 부모 요소의 높이가 고정되어 있어야 합니다.
그런데 Flex 컨테이너는 기본적으로 자식 요소의 크기에 맞춰 자동으로 늘어나기 때문에, 부모의 height가 제한되지 않으면 overflow가 작동하지 않습니다.

✅ 해결 방법

1. 부모 요소의 크기를 고정하거나 제한하기 (height: 100vh; 등)
2. 자식 요소의 min-height: 0; 설정으로 flex item의 크기 조절 허용
3. flex-grow: 1;을 활용해 자식 요소의 높이를 유동적으로 배분

📌 올바른 해결 코드

.parent {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 부모 요소 크기 고정 */
  overflow: hidden; /* 불필요한 스크롤 방지 */
}

.child {
  flex-grow: 1;  /* 남은 공간을 차지하도록 설정 */
  min-height: 0; /* 중요: flex-grow가 있을 때 overflow를 정상 작동하게 함 */
  overflow-y: auto; /* 자식 요소 내부 스크롤 활성화 */
}

---

결론

• Flex 컨테이너는 기본적으로 자식 요소에 맞춰 크기를 조절하기 때문에, 자식 요소가 넘쳐도 부모 요소에서 스크롤이 발생하지 않음.
• overflow가 동작하려면 부모 요소의 높이가 제한되어 있어야 함.
• 자식 요소의 flex-grow: 1;을 사용하면서 min-height: 0;을 설정하면 정상적으로 스크롤이 작동.

이제 display: flex;를 유지하면서도 스크롤이 정상적으로 동작하게 할 수 있습니다! 🚀