Css 位置：-webkit sticky仅在Safari（12.1.1）上flexbox儿童内的容器高度正常工作

位置：-webkit-sticky

使我的元素变得粘滞，但直到我们向上滚动到容器的高度。一旦我们滚动通过容器的高度，

粘滞元素

就会随着页面滚动。这只发生在Safari中（我使用的是12.1.1版），在Chrome和Firefox中都能很好地工作

我尝试过使用

self-align:flex-start

等修复方法，但它并没有解决我的问题

这是密码

<div class="container">
  <aside class="left">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat similique doloremque laborum ad repellendus atque, ut porro, sunt accusantium temporibus quaerat illum quis consequatur, illo numquam et? Quasi, aut corporis.
    </p>
  </aside>

  <aside class="right">
    <h1 class="sticky">Sticky Header</h1>
    <ul>
      <li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li>
      <li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li><li>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
      </li>
  </aside>

</div>

这里是一个代码笔的链接

---

在Safari和Chrome/Firefox中打开此链接，您可以看到行为上的差异。

h1的边距为19.*px，需要设置为0。在它变粘之前，需要滚动边距。高度为60px，线条高度相同

.sticky{
    position: sticky;
    position: -webkit-sticky;
    text-align: center;
    margin: 0;
    height: 60px;
    line-height: 60px;
    top: 0;
    background: inherit;
}

---

你在Facebook上得到了相同的答案，所以我不知道你首先在哪里寻找。

目前，我通过将粘性元素和内容包装在一个div中解决了这个问题。但我发现这是一种黑客方式。仍在等待适当的解决方案

<div class="container">
  <aside class="left">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat similique doloremque laborum ad repellendus atque, ut porro, sunt accusantium temporibus quaerat illum quis consequatur, illo numquam et? Quasi, aut corporis.
    </p>
  </aside>

  <aside class="right">
    <div class="wrapper">
      <h1 class="sticky">Sticky Header</h1>
      <ul>
        <li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li>
        <li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li>
      </ul>
    </div>
  </aside>

</div>

我的同僚们都是精英。这是一种类似于劳动和驱避的方式，它是一种暂时性的积累，是一种消耗，是一种新的消耗？准，自体。

粘头


Lorem ipsum dolor sit，amet Concertetur Adipising Elite。这是一个国际公共部门法（ipsa）所规定的权利，也是一个国家的权利、义务、义务和义务。乌拉姆，桑代。


Lorem ipsum dolor sit，amet Concertetur Adipising Elite。这是一个国际公共部门法（ipsa）所规定的权利，也是一个国家的权利、义务、义务和义务。乌拉姆，桑代。

Lorem ipsum dolor sit，amet Concertetur Adipising Elite。这是一个国际公共部门法（ipsa）所规定的权利，也是一个国家的权利、义务、义务和义务。乌拉姆，桑代。

Lorem ipsum dolor sit，amet Concertetur Adipising Elite。这是一个国际公共部门法（ipsa）所规定的权利，也是一个国家的权利、义务、义务和义务。乌拉姆，桑代。

Lorem ipsum dolor sit，amet Concertetur Adipising Elite。这是一个国际公共部门法（ipsa）所规定的权利，也是一个国家的权利、义务、义务和义务。乌拉姆，桑代。

Lorem ipsum dolor sit，amet Concertetur Adipising Elite。这是一个国际公共部门法（ipsa）所规定的权利，也是一个国家的权利、义务、义务和义务。乌拉姆，桑代。

Lorem ipsum dolor sit，amet Concertetur Adipising Elite。这是一个国际公共部门法（ipsa）所规定的权利，也是一个国家的权利、义务、义务和义务。乌拉姆，桑代。

Lorem ipsum dolor sit，amet Concertetur Adipising Elite。这是一个国际公共部门法（ipsa）所规定的权利，也是一个国家的权利、义务、义务和义务。乌拉姆，桑代。

Lorem ipsum dolor sit，amet Concertetur Adipising Elite。这是一个国际公共部门法（ipsa）所规定的权利，也是一个国家的权利、义务、义务和义务。乌拉姆，桑代。

Lorem ipsum dolor sit，amet Concertetur Adipising Elite。这是一个国际公共部门法（ipsa）所规定的权利，也是一个国家的权利、义务、义务和义务。乌拉姆，桑代。

您是否尝试过身高：100%在

上。对

，但运气不好。谢谢你。

<div class="container">
  <aside class="left">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat similique doloremque laborum ad repellendus atque, ut porro, sunt accusantium temporibus quaerat illum quis consequatur, illo numquam et? Quasi, aut corporis.
    </p>
  </aside>

  <aside class="right">
    <div class="wrapper">
      <h1 class="sticky">Sticky Header</h1>
      <ul>
        <li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li>
        <li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li><li>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
        </li>
      </ul>
    </div>
  </aside>

</div>