fixed flex basis bug in ff 34 about flexbugs HOT 10 CLOSED

I'm not sure there's actually a bug here. The Firefox change was due to the spec change mentioned in flexbug 1 that was updated in FF.

As far as I can tell, the input should be the size FF is setting it, since that's the width its UA stylesheet gives it.

@gregwhitworth can I get a second opinion?

from flexbugs.

I don't think the bug is the input. The size of the input is not being set by anything and is a replaced element and all UAs will have different sizes for that replaced element.

The bug that I see has to do with the size of the border-box and subsequent boxes not flexing to contain the input. My guess is that #flex is set and does not account for the width of the replaced input. This can actually be seen by introducing another replaced element (an image in this case) and get the same results: http://jsfiddle.net/944tL115/9/ The actual root cause is that it seems that FF is not using the flex-basis to calculate the end main-size of the flex container, which it should. You can see this by removing the css for the label

• Width of flex container when flex basis is applied to label: 166px
• Width of flex container when flex basis is not applied to the label: 166px

Technically they may be not waiting for the replaced elements to be calculated to increase the width of the flex container, or they aren't allowing the flex basis of the item to increase the size of the flex container. At any rate, since the container has no max limit, the flex container should shrink to the max of it's content with both the replaced elements and basis taken into account to compute that max.

Per what @philipwalton stated regarding the spec change, it had to do with changing auto -> main-size but even with that change (assuming you set flex: 0 1 main-size) the box should still be shrinking down to the max of the content which in this case is (80px + inputWidth).

For things that overflow (in FF case) I would avoid using an outline as FF places the outline around everything while Chrome/IE outline around the border-box (http://jsfiddle.net/50aadr5u/2/)

Please open up a bug against Firefox so that they can fix this.

from flexbugs.

@Krekotun Don't open a bug just yet - I found one that may fix this. @philipwalton Daniel's test on that page shows at times Blink doesn't take flex-basis into account when computing the hypothetical main-size of the items. Can you get a bug open for Blink?

from flexbugs.

@Krekotun Also, and this isn't the best workaround. But given your example, using width (based on the info from Daniel that they use width instead of flex-basis) you can set both the width and flex-basis the same and you'll get cross browser compatibility (http://jsfiddle.net/944tL115/15/).

from flexbugs.

So yes, the bug I linked to is indeed a flex bug in FF, as well as Chrome. Daniel made one that shows the Chrome bug (https://bug972595.bugzilla.mozilla.org/attachment.cgi?id=8549866) as Chrome is flexing the input instead of growing the container to the max of its contents as well. Chrome hasn't done the spec updates yet so this will probably get fixed during that. @philipwalton can you or @tabatkins speak to when Blink will be updating to the latest spec, especially since it's stabilizing.

from flexbugs.

I filed a bug against Chrome:
https://code.google.com/p/chromium/issues/detail?id=449417

I'm not sure when Chrome will implement the new spec changes, but (as I say in the bug), I'm not 100% sure that's the root of this problem.

from flexbugs.

Scratch that, the bug here now here:
https://code.google.com/p/chromium/issues/detail?id=464210

from flexbugs.

@philipwalton so what's happening with this one? If you don't feel it needs to be addressed on this repo I suggest we just close it - we have too many issues open as it is and you do have a bug filed on it. @dholbert do you know if you all have a similar bug for this one?

from flexbugs.

@dholbert do you know if you all have a similar bug for this one?

If I'm understanding correctly, I think "yes", and our bug on this is
https://bugzilla.mozilla.org/show_bug.cgi?id=1055887

from flexbugs.

@gregwhitworth, agreed, closing. Folks can continue to comment if new info comes up and we can re-open if needed.

from flexbugs.