Gecko interprets flex-box styling VERY differently in specific cases

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Gecko interprets flex-box styling VERY differently in specific cases

Valera Rozuvan
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
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Gecko interprets flex-box styling VERY differently in specific cases

Daniel Holbert-3
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
> [hidden email]
> https://lists.mozilla.org/listinfo/dev-tech-layout
>
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Gecko interprets flex-box styling VERY differently in specific cases

Daniel Holbert-3
On 12/29/2016 04:45 PM, Daniel Holbert wrote:
> 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.

Note: normally you don't want things to shrink below their minimum
intrinsic size, but in the case of an element with a flexible scrollable
thing inside of it, it's OK because the overflowing content inside the
scrollable thing will still be reachable.  That's why it's probably fine
to suppress the magic min-height:auto behavior here.

Note also that the spec has a special case that makes this Just Work for
overflow:scroll things that are direct children of a flex container.
But it doesn't help when the scrollable thing is a grandchild of a flex
container (including when there's a stack of 3 or more flex containers
and the innermost one happens to be scrollable). I brought this up on
the CSSWG mailing list, but right now the only fix is for authors to use
min-width:0/min-height:0 in a targeted way. List reference:
https://lists.w3.org/Archives/Public/www-style/2014Aug/0282.html
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Gecko interprets flex-box styling VERY differently in specific cases

Valera Rozuvan
In reply to this post by Valera Rozuvan
Daniel! Thank you for clearing this up to me. You are truly a magician. Happy new year = )

On Friday, December 30, 2016 at 2:45:12 AM UTC+2, Daniel Holbert wrote:

> 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
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Gecko interprets flex-box styling VERY differently in specific cases

Daniel Holbert-3
Glad I could help! Thanks for testing in Firefox & for reaching out.

On Dec 29, 2016 4:55 PM, "Valera Rozuvan" <[hidden email]> wrote:

> Daniel! Thank you for clearing this up to me. You are truly a magician.
> Happy new year = )
>
> On Friday, December 30, 2016 at 2:45:12 AM UTC+2, Daniel Holbert wrote:
> > 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
> _______________________________________________
> dev-tech-layout mailing list
> [hidden email]
> https://lists.mozilla.org/listinfo/dev-tech-layout
>
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Loading...