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

Question 1

나는 이것에 약간 붙어 있었고 이것을 공유 할 것이라고 생각했습니다 position: sticky+ flexbox 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

Question 2

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

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

현재 이것은 모든 주요 브라우저에서 지원 되지만 Safari는 여전히 -webkit-접두사 뒤에 있으며 Firefox를 제외한 다른 브라우저에는 position: sticky테이블에 몇 가지 문제가 있습니다.

.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; /* for Safari */
  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

Question 3

제 경우에는 상위 컨테이너 중 하나가 overflow-x: hidden;적용되어 position: sticky기능 이 중단 됩니다. 해당 규칙을 제거해야합니다.

상위 요소에는 위의 CSS 규칙이 적용되어서는 안됩니다. 이 조건은 'body'요소까지 (포함하지 않음) 모든 상위에 적용됩니다.

Question 4

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

그것은 첫 번째 열의 내용이 고정되어야하고 두 번째 열이 스크롤 가능하게 나타나는 2 열 레이아웃에서 저에게 효과적이었습니다.

Question 5

임시 변통 플렉스 박스 테이블을 만들었는데이 문제가있었습니다. 이 문제를 해결하기 위해 단순히 고정 헤더 행을 flexbox 바로 앞에 놓았습니다.

Question 6

내 상황에서는 align-self: flex-start(또는 justify-self: flex-start) 솔루션이 작동하지 않습니다. overflow-x: hidden일부 컨테이너는 수평으로 스 와이프하기 때문에 보관해야합니다 .

원하는 동작을 얻으려면 내 솔루션이 중첩 display: flex되어야 overflow-y: auto합니다.

헤더는 높이를 동적으로 조정할 수 있으므로 position: absolute또는position: fixed
콘텐츠가 세로로 스크롤되고 가로로보기 너비로 제한됨
고정 요소는 수직으로 어느 곳에 나있을 수 있으며 헤더 하단에 고정됩니다.
다른 요소는 수평으로 슬라이드 할 수 있습니다.
- SO 스 니펫 도구가 width수평 슬라이드를 제대로 보여주기 위해 자식 요소에서 렌더링 할 수 없거나 실제 레이아웃에 다른 설정이있어 작동 할 수있는 것 같습니다.
- 다른 overflow-x: auto작업을 수행 하지 않는 래퍼 요소는 다음이 있는 부모 아래의 요소에서 올바르게 작동 하도록 허용 해야합니다.overflow-x: hidden

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

body>header {
  background-color: red;
  color: white;
  padding: 1em;
}

.content {
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

article {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.horizontal_slide {
  display: flex;
  overflow-x: auto;
  background-color: lightblue;
  padding: .5em;
}

.horizontal_slide>* {
  width: 1000px;
}

.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: lightgray;
  padding: .5em;
  display: flex;
}

<header>Fancy header with height adjusting to variable content</header>
<div class="content">
  <article class="card">
    <h1>One of several cards that flips visibility</h1>
    <div class="overflow_x_wrapper">
      <div class="horizontal_slide">
        <div>Reason why `overflow-x: hidden` on the parent is required
        </div>
        <div>Reason why `overflow-x: hidden` on the parent is required
        </div>
        <div>Reason why `overflow-x: hidden` on the parent is required
        </div>
      </div>
      <div class="toolbar">Sticky toolbar part-way down the content</div>
      <p>Rest of vertically scrollable container with variable number of child containers and other elements</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </article>
  </div>

스 니펫 확장