Моє положення: липкий елемент не є липким при використанні flexbox

Question 1

Я трохи затримався на цьому і думав поділитися цим position: sticky+ flexbox gotcha:

Мій липкий div працював нормально, поки я не переключив свій погляд на контейнер flex box, і раптом div не став липким, коли його загорнули у батьківський файл flexbox.

.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

Оскільки елементи flex box за замовчуванням мають значення 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 до нього. Ця умова стосується всіх батьків до (але не включаючи) елемента "тіло".

Question 4

Ви також можете спробувати додати дочірній div до елемента flex із вмістом всередині та призначити position: sticky; top: 0;цьому.

Це працювало для мене для макета з двома стовпцями, де вміст першого стовпця повинен бути липким, а другий стовпець здавався прокручуваним.

Question 5

Я створив імпровізований флексбокс-стіл і мав цю проблему. Щоб його вирішити, я просто розмістив липкий рядок заголовка поза флексбокса, безпосередньо перед ним.

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>

Розгорніть фрагмент