Konumum: Flexbox kullanırken yapışkan öğe yapışkan değil

Question 1

Bu konuda biraz takıldım ve bu position: sticky+ flexbox gotcha'yı paylaşacağımı düşündüm :

Yapışkan div'im, görüşümü bir esnek kutu kapsayıcısına değiştirene kadar iyi çalışıyordu ve birdenbire, bir flexbox ebeveynine sarıldığında div yapışkan değildi.

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

Snippet'i genişlet

JSFiddle sorunu gösteriyor

Question 2

Esnek kutu öğeleri varsayılan olarak ayarlandığından stretch, tüm öğeler aynı yüksekliktedir ve bunlara karşı kaydırılamaz.

align-self: flex-startYapışkan öğeye ekleme , yüksekliği otomatik olarak ayarladı, bu da kaydırmaya izin verdi ve düzeltildi.

Şu anda bu tüm büyük tarayıcılarda desteklenmektedir , ancak Safari hala bir -webkit-önekin arkasında ve Firefox dışındaki diğer tarayıcılarda position: stickytablolarla ilgili bazı sorunlar var .

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

Snippet'i genişlet

JSFiddle çözümü gösteriyor

Question 3

Benim durumumda, üst kapsayıcılardan biri ona overflow-x: hidden;uygulanmış ve bu da position: stickyişlevselliği bozacaktır. Bu kuralı kaldırmanız gerekecek.

Hiçbir üst öğeye yukarıdaki CSS kuralı uygulanmamalıdır. Bu koşul, 'vücut' unsuruna kadar (ancak dahil değil) tüm ebeveynler için geçerlidir.

Question 4

Ayrıca flex öğeye içindeki içeriklerle bir child div eklemeyi deneyebilir ve position: sticky; top: 0;ona atayabilirsiniz .

Bu, ilk sütunun içeriğinin yapışkan olması gereken ve ikinci sütunun kaydırılabilir göründüğü iki sütun düzeni için benim için çalıştı.

Question 5

Derme çatma bir flexbox masası yaptım ve bu problemi yaşadım. Bunu çözmek için, yapışkan başlık satırını flexbox'ın dışına, hemen önüne koyuyorum.

Question 6

Benim durumum için, align-self: flex-start(veya justify-self: flex-start) çözüm işe yaramıyor. overflow-x: hiddenBazı kaplar yatay olarak kaydırıldığı için benim de tutmam gerekiyor .

Benim çözümüm yuvalanmış gerekli display: flexolan overflow-y: autoistenilen davranışları almak için:

başlık yüksekliği dinamik olarak ayarlayabilir, bu da position: absoluteveyaposition: fixed
içerik dikey olarak kaydırılır, yatay olarak görünüm genişliğiyle sınırlandırılır
yapışkan öğe dikey olarak herhangi bir yerde olabilir ve başlığın altına yapışabilir
diğer öğeler yatay olarak kayabilir
- Görünüşe göre SO parçacığı aracı width, yatay slaytı göstermek için alt öğeler üzerinde düzgün bir şekilde işleyemiyor veya belki de gerçek düzenimde onu çalıştıran başka bir ayar var ...
- overflow-x: autobir üst öğe altındaki öğelerde düzgün çalışmasına izin vermek için başka hiçbir şey yapmayan bir sarmalayıcı öğesinin gerekli olduğuna dikkat edin.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>

Snippet'i genişlet