The "universal reset" can have oddball repercussions, this COULD be part of it. It's why I suggest more verbose resets as applying *{} can go a bit wonky for margin. MORE of an issue on form elements it's part and parcel of why I say "just don't do it"
What's with the empty "anchors for nothing"? Are you still trying to use the outmoded "name" approach but switched them to ID's? If so, just put the ID's on the DIV/SECTION and drop the pointless anchors. That's what ID's are for.
But overall I'm not seeing anything too far off, but could you define "lost"... oh wait, you're relying on the DEFAULT flex behavior, which on some devices flex-shrink is ON by default.
Try setting flex:0 0 auto; on both <header> and <footer>. If shrink is on, it'll shrink smaller than its content.