Firefox, Edge 및 IE에서 'flex-direction:column-reverse'가 스크롤을 비활성화하는 이유는 무엇입니까?

Firefox, Edge 및 IE에서 Flexbox 열 역방향 문제

반응형 애플리케이션을 만들 때 Flexbox를 사용하여 콘텐츠를 표시하는 것이 일반적입니다. 특정 시나리오에서는 화면 크기가 변경될 때 요소의 순서를 반대로 바꾸고 싶을 수도 있습니다. Chrome에서는 원활하게 작동하지만 Firefox, Edge 및 Internet Explorer에서는 수수께끼 같은 문제가 발생합니다.

flex-direction:column-reverse를 사용하여 항목 순서를 반대로 하면 문제가 더욱 분명해집니다. Chrome에서는 스크롤바가 예상대로 작동하여 사용자가 위로 스크롤하여 이전 항목을 볼 수 있습니다. 그러나 영향을 받는 브라우저에서는 스크롤 막대가 나타나지만 비활성화된 상태로 유지됩니다.

이 문제를 설명하기 위해 다음 코드를 살펴보겠습니다.

<code class="css">#list {
  display: flex;
  flex-direction: column-reverse;
  height: 250px;
  overflow-y: scroll;
  border: 1px solid black;
}

.item {
  flex: 1;
  padding: 2em;
  border: 1px dashed green;
}</code>

이 코드를 사용할 때 앞서 언급한 문제는 Firefox, Edge 및 IE에서 발생합니다.

근본 원인 및 해결 방법

이 문제는 영향을 받는 브라우저에 존재하는 버그로 인해 발생합니다. 특히 flex-direction:column-reverse 및overflow-y:auto를 사용하면 스크롤바가 의도한 대로 작동하지 않습니다.

해결 방법으로 flex-direction:column-reverse 대신 열을 사용할 수 있습니다. . 이 접근 방식은 동일한 시각적 효과를 달성하고 지원되는 모든 브라우저에서 스크롤 막대가 올바르게 작동하도록 보장합니다.

추가 정보

이 문제에 대한 자세한 내용과 통찰력은 다음을 참조하세요. 다음 리소스에 추가:

• [Flexbugs - Column-reverse 및 Overflow-y 스크롤 불가](https://github.com/philipwalton/flexbugs/issues/104)
• [버그 1042151 - flex-direction: column-reverse(또는 "flex-direction:column; justify-content:flex-end")와 Overflow-y: auto는 스크롤할 수 없습니다.](https://bugzilla.mozilla.org/ show_bug.cgi?id=1042151)

위 내용은 Firefox, Edge 및 IE에서 'flex-direction:column-reverse'가 스크롤을 비활성화하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!