Flexbugs: flex-grow with flex-base 0 not equally distributing width if elements have different padding

[thasmo]

Is the following example calculating a valid width for the items?
http://jsfiddle.net/4cg7e1xp/2/

Seems like to work the same in every browser.
Even changing box-sizing doesn't change the width calculation.

What's the reason for this?

I was looking around the web to find an explanation but didn't find anything so I was hoping anybody would help me out here - feel free to close this issue.

[philipwalton]

When you specify a flex-basis (as you are in your flex shorthand), the browser looks at that and completely ignores any width/height declarations. To get the browser to use your set width, use a flex-basis of auto, or better yet, just use a flex-basis of 50% since that's what you want the width to be.

[thasmo]

@philipwalton, auto works only if there's no content inside the items. If there is content inside, the width is distributed based on each items content's width. The only thing I can do is to set the width explicitely to 50%, which only works if I have two items. If I have an _unknown_ amount of items this won't work anymore. Is there no way to get equal-width items without specifying the width?

[philipwalton]

flex: 1 1 0% will work to make the content boxes of an unknown set of flex items all the same size. If you need to add padding to one of the items (but not all of them), the sizing will be different. You can get around this by making a child element and putting the padding on that.

[thasmo]

@philipwalton, yeah that's what I did for now but I was wondering why it wouldn't calculate the same widths if there's different padding _while_ using box-sizing: border-box. Do you may know why this behaves the same or what the reason for this is?

[philipwalton]

It's working as intended. I think you may be confusing the width aspect vs. the flex grow/shrink aspect.

When you say flex: 1 1 0% you're saying the width should be 0%, and then it should grow/shrink proportionally. You're not saying it should have a width of 50%.

And when you give something a width of 0%, it's not actually going to be 0px big if it has padding/border, as you can see from this example: http://codepen.io/anon/pen/PwQBrM

[thasmo]

Ah, that's why - thanks a lot for explaining!