Sticky Elements and Flexbox: A Gotcha

스크롤하는 동안 지정된 위치에 고정된 요소에 사용되는 고정 위치 지정이 예기치 않게 작동합니다. Flexbox 컨테이너와 함께 사용할 때. 이 문제는 Flexbox 요소가 기본적으로 늘어나서 스크롤할 수 없는 일관된 높이의 요소가 생성될 때 발생합니다.

이 문제를 해결하려면 고정 요소에 align-self: flex-start를 추가하세요. 이 속성은 요소의 높이를 자동으로 설정하여 스크롤 및 위치 문제 해결을 허용합니다.

위치: 고정 테이블에 대한 브라우저 지원은 다양하다는 점에 유의하는 것이 중요합니다. Safari에는 -webkit- 접두사가 필요하지만 Firefox에서는 현재 문제가 발생합니다.

다음은 참조용으로 조정된 코드 조각입니다.

.flexbox-wrapper {<br> display: flex; <br> 오버플로: 자동;<br> 높이: 200px;          /<em> 필요하지 않음 -- 예를 들어 </em>/<br>}<br>.regular {<br> background-color: blue; /<em> 필요하지 않습니다. 예를 들어 </em>/<br> 높이: 600px;          /<em> 필요하지 않음 - 예를 들어 </em>/<br>}<br>.sticky {<br> position: -webkit-sticky; /<em> Safari용 </em>/<br> 위치: 고정;<br> 상단: 0;<br> align-self: flex-start; /<em> <-- 수정 사항입니다 </em>/<br> background-color: red;  /<em> 필요하지 않음 - 예를 들면 </em>/<br>}<br>

위 내용은 내 고정 요소가 Flexbox에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!