Moja pozycja: element lepki nie przykleja się przy używaniu flexboksa

Question 1

position: stickyUtknąłem na tym trochę i pomyślałem, że udostępnię to + flexbox mam:

Mój sticky div działał dobrze, dopóki nie przełączyłem widoku na pojemnik flexbox i nagle element div nie był lepki, gdy był zapakowany w element nadrzędny 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>

Rozwiń fragment

JSFiddle pokazujący problem

Question 2

Ponieważ elementy Flex Box są domyślnie stretchustawione, wszystkie elementy mają tę samą wysokość, której nie można przewijać.

Dodanie align-self: flex-startdo elementu sticky ustawia wysokość na auto, co pozwala na przewijanie i naprawia to.

Obecnie jest to obsługiwane we wszystkich głównych przeglądarkach, ale Safari nadal ma -webkit-prefiks, a inne przeglądarki, z wyjątkiem Firefoksa, mają pewne problemy z position: stickytabelami.

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

Rozwiń fragment

JSFiddle pokazujący rozwiązanie

Question 3

W moim przypadku overflow-x: hidden;zastosowano do niego jeden z kontenerów nadrzędnych , co zepsuje position: stickyfunkcjonalność. Musisz usunąć tę regułę.

Żaden element nadrzędny nie powinien mieć zastosowania powyższej reguły CSS. Warunek ten dotyczy wszystkich rodziców aż do elementu „body” (ale z wyłączeniem).

Question 4

Możesz także spróbować dodać podrzędny element DIV do elementu elastycznego z zawartością wewnątrz i przypisać go position: sticky; top: 0;do niego.

To zadziałało dla mnie w przypadku układu dwóch kolumn, w którym zawartość pierwszej kolumny musiała być lepka, a druga kolumna wydawała się przewijalna.

Question 5

Zrobiłem prowizoryczny stół flexbox i miałem ten problem. Aby go rozwiązać, po prostu umieszczam lepki rząd nagłówka poza flexboxem, tuż przed nim.

Question 6

W mojej sytuacji align-self: flex-start(lub justify-self: flex-start) rozwiązanie nie działa. Muszę również zachować, overflow-x: hiddenponieważ niektóre pojemniki przesuwają się poziomo.

Moje rozwiązanie wymagało zagnieżdżenia display: flexz, overflow-y: autoaby uzyskać pożądane zachowania:

Header może dynamicznie regulować wysokość, co zapobiega graniu z position: absolutelubposition: fixed
zawartość jest przewijana w pionie, ograniczona w poziomie do szerokości widoku
lepki element może znajdować się w dowolnym miejscu w pionie, przyklejając się do dołu nagłówka
inne elementy mogą przesuwać się poziomo
- wygląda na to, że narzędzie fragmentu SO nie może renderować widthelementów podrzędnych, aby prawidłowo zademonstrować poziomy slajd, a może jest jakieś inne ustawienie w moim rzeczywistym układzie, które sprawia, że działa ...
- zwróć uwagę, że element opakowujący, który nie robi nic więcej, jest wymagany, aby umożliwić overflow-x: autopoprawne działanie w elementach nadrzędnych zoverflow-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>

Rozwiń fragment