[would like to pin and expand height of div on scroll]

I would like to accomplish the following:

--a fixed nav header at the top (black strip)

--as soon as you scroll, the red div just below the header expands in height and becomes pinned.
--divs below the first  (like the blue div) are not pinned

For the red div, the x:50 move works (it's just a test), but the height expansion does not work.

For blue div, the height expansion does work.

Codepen included.

TIA
 

See the Pen jOKWvVg by mindbet (@mindbet) on CodePen