Gecko interprets flex-box styling VERY differently in specific cases

Hi all!

For the past couple of days I have been trying to make a simple page for my client using flex-box. It is essentially done, and can be found here: https://output.jsbin.com/nesiza . The only problem is that Firefox doesn't display the two headers (green and orange) on the page. Latest versions of Chrome, IE, and Safari - do display the headers correctly.

It appears that when there is a mix of flex containers and flex items - Firefox CSS rendering engine (Gecko) interprets it differently than is stated in the standard.

Is this a bug? Or am I missing something very fundamental? Any help will be appreciated.