Position Sticky doesn't work in Flexbox- what could the reason be?

Question

The parent div is Future (which is a flexbox). I want the Future-editorial div to stick (which is the left-hand side div), as the right Future-roadmap scrolls. Note that Future-roadmap is itself a grid. Please suggest what the gotchas here could be, and how I could make this work. I am posting the whole structure, so you can see the specifics of the structure. Thanks!

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;
  }
}