Unfortunately, the Holy Grail layout works like crap in mobile. In the most recent Chrome and Firefox for Android, the pinch-to-zoom gesture either doesn't work at all, or the whole div is resized as an image without text reflow (i.e. cropping text lines to the left and right). Also there seems to be a forced minimum width, under which the web pace can't be made smaller; this is awful for navigating long pages, or when the default font size is too big.
Changing the phone orientation does reflow the text, so I assume that the problem is with how these browsers resize the web page under pinch-and-zoom in a way that the CSS doesn't detect. The funny thing is that the same browsers on desktop work like a breeze when resizing text with the wheelmouse, or resizing the window. Why does it not work the same on the phone?
The worst thing is that the layout seems to be spreading like fire. I'm forced to read most major modern websites at fixed font size.
Resizing-as-image rather than resizing-as-text is how mobile browsers have always worked. At least, ever since the iPhone, which the other OSs copied the browser model of. The zoom behavior you are describing happens on every page in those browsers, and has nothing to do with flexbox or the holy grail layout.
If you want to change text size without cropping text, in Chrome for Android, go to Settings > Accessibility and drag the “Text scaling” slider. And in Firefox for Android, go to Settings and open “Text size”. It’s not as convenient as pinch-to-zoom, but it’s worth adjusting that slider for the current page if you’ll be reading it for a while.
Testing in Chrome 29 - pinch to zoom is disabled but are you sure that's not a deliberate choice in this specific case rather than a flaw with flexbox?
I don't know if it's a flaw with flexbox, but with the way sites are adopting it. The recommended layout from A list apart and Solved by flexbox both exhibit these problems, as well as multiple mainstream news sites.
Changing the phone orientation does reflow the text, so I assume that the problem is with how these browsers resize the web page under pinch-and-zoom in a way that the CSS doesn't detect. The funny thing is that the same browsers on desktop work like a breeze when resizing text with the wheelmouse, or resizing the window. Why does it not work the same on the phone?
The worst thing is that the layout seems to be spreading like fire. I'm forced to read most major modern websites at fixed font size.