내 위치 : 플렉스 박스를 사용할 때 고정 요소가 고정되지 않습니다.

내 위치 : 플렉스 박스를 사용할 때 고정 요소가 고정되지 않습니다.

---

나는 이것에 약간 붙어 있었고 이것을 공유 할 것이라고 생각했습니다 position: sticky+ flex box gotcha :

내 고정 div는 내 뷰를 플렉스 박스 컨테이너로 전환 할 때까지 잘 작동했고 갑자기 div가 플렉스 박스 부모에 래핑되었을 때 고정되지 않았습니다.

.flexbox-wrapper {
  display: flex;
  height: 600px;
}
.regular {
  background-color: blue;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: red;
}

<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky">
    This is the sticky box
  </div>
</div>

문제를 보여주는 JSFiddle

---

플렉스 박스 요소의 기본값은 stretch이므로 모든 요소의 높이가 같으므로 스크롤 할 수 없습니다.

align-self: flex-start고정 요소에 추가 하면 높이가 자동으로 설정되어 스크롤이 허용되고 수정되었습니다.

현재 이것은 Safari 및 Edge 에서만 지원 됩니다.

.flexbox-wrapper {
  display: flex;
  overflow: auto;
  height: 200px;          /* Not necessary -- for example only */
}
.regular {
  background-color: blue; /* Not necessary -- for example only */
  height: 600px;          /* Not necessary -- for example only */
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: flex-start; /* <-- this is the fix */
  background-color: red;  /* Not necessary -- for example only */
}

<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky">
    This is the sticky box
  </div>
</div>

솔루션을 보여주는 JSFiddle

---

내용이 포함 된 플렉스 항목에 하위 div를 추가하고 할당 position: sticky; top: 0;할 수도 있습니다.

That worked for me for a two column layout where the contents of the first column needed to be sticky and the second column appear scrollable.

---

In my case,

One of the parent containers had this applied to it:

overflow-x: hidden;

You need to remove the above rule.

No parent element should have the above CSS rule applied to it. This condition applies to all parents up to (but not including) the 'body' element.

ReferenceURL : https://stackoverflow.com/questions/44446671/my-position-sticky-element-isnt-sticky-when-using-flexbox