Липкое положение + Flex выравнивающие анкеры сверху

Question

При использовании позиции sticky и align-self: start; чтобы избежать гибкого растяжения - содержимое растет вверх, а не отталкивается вниз. Существует ли обходной путь или другой способ реализации этого, когда содержимое толкается вниз, а не вверх.

Для проверки.

1. Прокрутите вниз до того момента, когда позиция закрепления останавливается липкий.
2. Щелкните на 2-й фиолетовой рамке

3. Вы увидите, что содержимое растет вверх, а не толкает страницу вниз.

   Как я могу sh вместо этого страницу вниз?

Если вы удалите align-self: flex-start; , тогда он будет работать как задумано и сдвинется вниз, но оранжевый фон слишком длинный. Должно совпадать только с содержанием.

Код: ссылка

let toggle = document.querySelectorAll('.toggle')

toggle.forEach((t) => {
  t.addEventListener('click', () => {
    t.style.height = '500px'
  })
})

html {
  color: white;
}

section {
  background: red;
  width: 100%;
  display: flex;
}

.content {
  background: blue;
  height: 2000px;
  width: 100%;
}

.sticky {
  position: sticky;
  align-self:flex-start;
  top: 0;
  background: orange;
  width: 100%;
}

.toggle {
  background: purple;
  height: 300px;
  width: 50px;
}

.more {
  background: green;
  height: 400px;
  width: 100%;
}

<div class="more">
  spacer
</div>

<section>
  
  <div class="content">
    <p>Content</p>
  </div>

  <div class="sticky">
    <p> sticky </p>
    <div class="toggle">
      <p>Top A</p>
      <p>row A2</p>
      <p>row A3</p>
    </div>
    <div class="toggle">
      <p>Top B</p>
      <p>row B2</p>
      <p>row B3</p>
    </div>
  </div>
  
</section>

<div class="more">
  spacer
</div>