Edge's rendering matches Firefox, BTW (you probably want to test Edge rather than IE, for modern standards-compliance at least).
The issue is with the magic "min-height:auto" / "min-width:auto" behavior in modern Flexbox. You've got two nested instances of this pattern: <flex container> <small header> <greedy content area> ...and in each instance, the "greedy content area" has a huge minimum intrinsic height, which means it absorbs all of the container's free space up-front and forces the other flex item (<small-header) to shrink to its min-height (which happens to be 0). You can work around this behavior by giving the greedy thing "min-height:0", to explicitly give it permission to shrink below its minimum intrinsic height. In this case, you need to do that for .app and .contbody. Here's an updated version of your page with that fixed: https://output.jsbin.com/gugeduxoxi/ This works in both Firefox and Edge. ~Daniel P.S. I think Chrome's behavior here is buggy, and probably an instance of https://bugs.chromium.org/p/chromium/issues/detail?id=487302#c8 On 12/29/2016 04:33 PM, Valera Rozuvan wrote: > 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. > _______________________________________________ > dev-tech-layout mailing list > [email protected] > https://lists.mozilla.org/listinfo/dev-tech-layout > _______________________________________________ dev-tech-layout mailing list [email protected] https://lists.mozilla.org/listinfo/dev-tech-layout
