Re: [css-flexbox] flex-shrink being handled differently in different browsers

On Tue, Dec 16, 2014 at 10:14 AM, Philip Walton <philip@philipwalton.com> wrote:
> According to the editors draft of the flexbox spec, the initial
> `flex-shrink` value for flexbox items is 1 and the initial value for
> `flex-basis` is `auto`.
>
> I've linked to a jsbin where there is too much content to fit into a
> containing box, and the way the shrinking is happening in Chrome/IE12 is
> different from FF/Safari.
>
> http://jsbin.com/xetinivozo/1
>
> Since the initial `flex-shrink` value is 1, it seems perhaps Chrome and IE
> are correct, but it's unclear how they've chosen the amount they're
> shrinking.
>
> Can anyone speak to which behavior is correct and why?

Haven't tested IE, but Chrome's behavior is incorrect, and it's
because they haven't yet matched the spec regarding the implied
minimum size of flex items
<http://dev.w3.org/csswg/css-flexbox/#min-size-auto>.  Since they're
not honoring that, the height is allowed to shrink to zero, leaving
only the padding, and then the text overflows downwards.

The correct behavior, since overflow is "hidden" (the default value)
on the header and footer, is to treat them as "min-height:
min-content;", and not shrink at all, like Firefox does.

~TJ

Received on Tuesday, 16 December 2014 19:17:51 UTC