Also note that as you have used height:100vh on .a then your content can never grow more than that viewport size because you have not provided scrollbars for it (it will just overflow and the backgrounds will not follow). Use min-height:100vh instead if you only wanted an initial viewport height.
I know how I can fix it using other solutions, but I want to know why the flex behaves differently on my website. ‘Main’ should take up the remaining height, but it doesn’t. The setup is exactly the same as the example in this post. So what’s difference, I don’t understand.
As mentioned previously your height:100% on main does nothing and you height:100% on body does nothing also because html has no height. Both those will fail and revert to height:auto.
As @Archibald suggests you should use the vh unit instead and subtract the height of the nav using calc and then it will all work and you can get rid of the height:100% on the elements already mentioned.
However if you had used a flex wrapper properly you wouldn’t need a magic number fix using calc. I’ll show a demo later when I get back to the computer.
That’s because the whole page is not contained in a flex wrapper. At the moment you have two different elements who don’t share the same flex parent so their content heights are not controlled by flex properties of the main wrapper.
You could use the body as a flex parent with flex-direction column and then it’s direct children can be controlled with flex properties as shown in my initial reply.
Rather than have the scrollbar on the scrollable panel I would prefer to have the scrollbar on the viewport as most people would expect. If you use position:sticky for the header (and footer if needed) as @Archibald suggested above you can have the scrollable panel scrol but be activated by the viewport scrollbar in the normal way.