Firefox Not Respecting Flex Shrink

Question

Goal: A nav, using flexbox, where there's a logo to the left and a variable number of nav items to the right. When the nav items become wide enough where there's not enough room for both the nav and the logo, the logo shrinks.

.logo{
    display: flex; flex-shrink:1;flex-grow:0;
}
.nav-container{
    display: flex; flex-shrink:0;flex-grow:2;
}

Problem: It works great in Chrome, but not in Firefox.

Tried to use flex-basis but it created a specific ratio and broke the working example in Chrome.

Demo: http://codepen.io/leggomuhgreggo/pen/BobwYz

Thanks!

Answer 1

You need to add min-width:0 to your .logo{} rule. That allows it to shrink below its minimum intrinsic size (which Firefox computes as being the intrinsic width of the img).

Here's your demo with that change.

(Side note: The fact that Chrome and Firefox behave differently here is an instance of this bug. Chrome is honoring the img's percent max-width when computing the minimum intrinsic size of the flex item; Firefox is not. If you drop the max-width:100% on the img style rules, then you'll see that Chrome changes its rendering to match Firefox & refuses to let the logo shrink, unless you add min-width:0.)