8

I noticed a small difference after reducing the viewport with a layout based on flexbox containers. The following snippet contains a few links inside two containers (.container and .subcontainer). In Chrome (45 beta), the divs with class element have the same width regardless of the viewport dimension. However, in Firefox (40), the width of each div changes depending on its content.

   html,
   body {
     margin: 0;
     padding: 0;
   }
   .container {
     position: relative;
     display: flex;
     flex-direction: column;
     width: 50%;
   }
   .element {
     flex: 1 0 0;
     padding: 0.5em;
     text-align: center;
     position: relative;
     background-color: red;
     margin-right: 1em;
   }
   .subcontainer {
     flex: 0 1 auto;
     display: flex;
   }
   .element a {
     color: black;
   }
<!DOCTYPE html>
<html>

<body>
  <div class="container">
    <div class="subcontainer">
      <div class="element"><a>abc</a>
      </div>
      <div class="element"><a>abcdef</a>
      </div>
      <div class="element"><a>abcdef</a>
      </div>
    </div>
  </div>
</body>

</html>

I think the "Run code snippet" functionality doesn't allow to see this change, so I provide a couple of gifs showing the difference:

Chrome:

enter image description here

Firefox:

enter image description here

As you can see, the boxes share the same width in Chrome, but Firefox constrains the first box quite noticeably and the other boxes keep their proportions. What is the reason of this discrepancy and how can I fix it? I'd like to have the same width for each box. That was the purpose of using flex: 1 0 0 in the first place.

Thanks

2
  • What do you mean, 'does not allow you to see the change'? I have Fx40 and do not see the issue captured in your screenshot when running the snippet.
    – klaar
    Aug 14, 2015 at 6:47
  • Yes. I was referring to the "Run code snippet" feature here in SO (it doesn't allow you to reduce the size of your browser without generating scrollbars) However, if you are using the html snippet in other window, you need to resize your browser quite a bit to see the difference. At some point, Firefox changes the width of each div depending on the content.
    – r_31415
    Aug 14, 2015 at 7:03

1 Answer 1

9
+50

Try to set min-width to any value you need, or just 0px:

.element
{
   ...
   min-width: 0px;
}

Fiddle

Details

For Firefox flex items has min-width:min-content by default, as pointed here

These implementations where implementing a slightly simpler behavior for this keyword: it computed to min-content on flex items, and it computes to 0 on everything else.

So, if we set min-width:-webkit-min-content for Chrome, it will have the same unwanted behaviour - jsfiddle.

6
  • 1
    Interesting. It works. Thank you. Do you know why min-width: 0px; fixes this issue?
    – r_31415
    Aug 16, 2015 at 16:00
  • @RobertSmith, I've added details to my answer
    – Kris Ku
    Aug 17, 2015 at 8:48
  • You could write min-width: 0, without px. Aug 17, 2015 at 9:11
  • @SergeyDenisov, yes, I could. But I don't do that, because my style seems to me more readable.
    – Kris Ku
    Aug 17, 2015 at 9:26
  • Thanks. That explains the solution.
    – r_31415
    Aug 17, 2015 at 16:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.