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

다른 브라우저의 Flexbox 열 역방향 동작

Flexbox는 강력한 레이아웃 시스템을 제공하지만 브라우저 간에 특정 속성을 구현할 때 불일치가 발생합니다. 이러한 문제 중 하나는 Firefox, Edge 및 IE의 flex-direction:column-reverse 속성 동작과 관련이 있습니다.

문제

다음 HTML 및 CSS를 고려하세요. 코드:

<code class="html"><div id="list">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div></code>

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

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

예상 동작

이 코드가 Chrome에 표시되면 위로 스크롤하여 볼 수 있는 항목의 세로 목록이 생성됩니다. 이전 항목입니다.

예기치 않은 동작

그러나 Firefox, Edge 및 IE/Edge에서는 스크롤 막대가 비활성화된 것으로 나타납니다.

이유

이러한 동작은 앞서 언급한 브라우저의 버그로 인해 발생합니다. flex-direction:column-reverse를 사용하는 경우 스크롤 막대는 Chrome에서만 작동합니다. 열 역방향을 단순 열로 변경하면 모든 브라우저에서 스크롤 막대가 작동합니다.

추가 정보

이 버그에 대한 자세한 내용은 다음을 참조하세요. 리소스:

• 버그 1042151 - https://bugzilla.mozilla.org/show_bug.cgi?id=1042151
• Philip Walton / flexbugs - 열 역방향 및 오버플로-y 아님 스크롤 가능 https://github.com/philipwalton/flexbugs/issues/618

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