css - Position Sticky 在 Flexbox 中不起作用——可能是什么原因？

Question

父 div 是Future（这是一个flexbox）。我希望div 在右侧滚动Future-editorial时粘住（这是左侧的 div） 。Future-roadmap请注意，Future-roadmap它本身就是一个网格。请提出这里的陷阱可能是什么，以及我如何才能做到这一点。我发布了整个结构，所以你可以看到结构的细节。谢谢！

HTML-

  <section className="s6">
        <div className="future">

          <div className="future-editorial">
            <h2 className="future-editorial__header">But there’s a bigger picture here</h2>
            <p>
              Lorem Ipsem
            </p>
          </div>

          <div className="future-roadmap">
            <div className="promo-group__copy">
              <h2 className="promo-group__header">
                <span className="promo-group__header--red">
                &#x2018;
              </span>
              Lorem Ipsem
            </h2>
              <p>
                Lorem Ipsem
              </p>
              <hr className="promo-group__header--line"/>
              <div className="testimonial">
                <div className="testimonial__copy">
                  Lorem Ipsem
                </div>
              </div>
            </div>

            <div className="future-roadmap__items">
              <div className="future-roadmap__item">
                <img
                  alt="customer success"
                  src={handshake}
                  role="presentation"
                  className="future-roadmap-item__image"
                />
              <h3 className="future-roadmap__item--header">Customer Success</h3>
                <p>
                  Lorem Ipsem
                </p>
              </div>
              <div className="future-roadmap__item">
                <img
                  alt="team"
                  src={teamwork}
                  role="presentation"
                  className="future-roadmap-item__image"
                />
                <h3 className="future-roadmap__item--header">Engineering</h3>
                <p>
                  Lorem Ipsem
                </p>
              </div>
              <div className="future-roadmap__item">
                <img
                  alt="Product Puzzle"
                  src={puzzle}
                  role="presentation"
                  className="future-roadmap-item__image"
                />
                <h3 className="future-roadmap__item--header">Product</h3>
                <p>
                  Lorem Ipsem
                </p>
              </div>
              <div className="future-roadmap__item">
                <img
                  alt="marketing chart"
                  src={marketingChart}
                  role="presentation"
                  className="future-roadmap-item__image"
                />
                <h3 className="future-roadmap__item--header">Marketing</h3>
                <p>
                  Lorem Ipsem
                </p>
              </div>
              <div className="future-roadmap__item">
                <img
                  alt="sales"
                  src={startup}
                  role="presentation"
                  className="future-roadmap-item__image"
                />
                <h3 className="future-roadmap__item--header">Sales</h3>
                <p>
                  Lorem Ipsem
                </p>
              </div>
              <div className="future-roadmap__item">
                <img
                  alt="recuriting organization"
                  src={organization}
                  role="presentation"
                  className="future-roadmap-item__image"
                />
                <h3 className="future-roadmap__item--header">Recruiting</h3>
                <p>
                  Lorem Ipsem
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

CSS-

.s6 {
  .future {
    display: flex;
    overflow: auto;
  }
  .future-editorial {
    align-self: flex-start;
    background: url(../images/editorial-bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    padding: 5% 5% 5% 3%;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
  .future-editorial__header {
    color: var(--white);
    font-family: "Lato", sans-serif;
    font-size: 42px;
    font-weight: 900;
    margin-top: 70%;
  }
  .promo-group__header--line {
    width: 30%;
  }
  .text__quote {
    width: 50%;
  }
  .future-roadmap {
    padding-top: 6%;
  }
  .future-roadmap__items {
    display: grid;
    grid-template-columns: auto auto;
  }
}

标签： cssreactjs