Sticky position + Flex alignment anchors at top - html

Question

When using position sticky and a align-self: start; to avoid flex stretching--the content grows upwards instead of pushing down. Is there a workaround or a different way of implementing this where the content pushes down instead of up.
To test.
Scroll down to when the sticky position stops being sticky.
Click on the 2nd purple box
You will see that the content grows upwards instead
of pushing the page down.
How can I push the page down instead?
If you remove align-self:flex-start; then it works as intended and pushes down but the orange background is too long. It should only match the content.
Codepen: link
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>