position:sticky left:0 breaks when adding a parent div

Question

I'm trying to make a layout where the header gets scrolled out but the nav and footer are kept. Here's the link to it:

https://play.tailwindcss.com/LiIq5be2Wz?size=360x640

Here's the same code written in jsfiddle: https://jsfiddle.net/cdxqsfu4/

I already have it working but the framework I'll be using this on needs to have an app div. After adding it (or uncommenting it, in this case), only the top:0 part seems to be sticky, not the left:0. Is there a way to fix this?

EDIT: Here are the specifications I need:

• The scrollbar should span the entire view, including the header and footer.
• The header needs to be hidden when scrolled down.
• The nav should be sticky to the top-most and left-most side of the screen.
• The nav should span the entire width of the screen.
• The footer should be sticky to the bottom-most and left-most side of the screen.
• The footer should span the entire width of the screen.
• The header needs to be outside of the app div.

Answer 1

The easiest solution would be to change the order of your markup. You should nest your header with the other divs and set one of them to overflow-auto. Doesn't matter which one. Using two overflow-auto's was the only way to get it to work with your previous structure, which loses the header scrolling.

See it working on Tailwind Play.