Trouble with sticky positioning (position: sticky)

Question

This is a basic recreation of my layout. I want the div.STICKY-BOTTOM div to stick to the bottom of its container (div.content).

(this is actually the mobile version, which is why div.content is column-reverse, whereas on desktop it's row)

<div class="AppContent">
  <div class="header"/>
  <div class="LobbyWrapper">
    <ul class="SwitcherWrapper"/>
    <div class="FilterBar"/>

    <div class="page">
      <div class="content"> /* flex-direction: column-reverse; position: relative; */
        <div class="top"/>
        <div class="STICKY-BOTTOM"/> /* position: sticky; bottom: 0px; width: 100vw; */
      </div>
    </div>
  </div>
  <div class="footer"/>
</div>

But the div.STICKY-BOTTOM is still above the div.top, in its normal column-reverse position.

This is the full style for div.content (this is all with styled-components by the way):

display: flex;
justify-content: center;
gap: 16px;
width: 100%;
max-width: 1756px;
min-width: 320px;
position: relative;

@media (max-width: ${propsLobbyBreakpoints.small}px) {
  flex-direction: column-reverse;
  align-items: center;
}

FWIW, position: fixed works but that of course sticks to the very bottom, below the site footer, which is not what I want.