Моя позиция: липкий элемент не является липким при использовании flexbox

Я немного застрял в этом и подумал, что я поделился бы этим position: sticky + flex box:

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

.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>

Ответ 1

Поскольку для элементов flex box по умолчанию установлено значение stretch, все элементы имеют одинаковую высоту, к которой нельзя прокручивать.

Добавление align-self: flex-start к липкому элементу установило высоту auto, что позволило прокручивать, и исправило ее.

В настоящее время поддерживается только в 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>

Ответ 2

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

Это сработало для меня с двумя колонками, где содержимое первого столбца должно быть липким, а второй - прокручиваемым.

Ответ 3

В моем случае,

К одному из родительских контейнеров это применимо:

overflow-x: hidden;

Вам нужно удалить указанное выше правило.

Ни к одному родительскому элементу не должно применяться указанное выше правило CSS. Это условие применяется ко всем родителям вплоть до (но не включая) элемента body.