flex-grow with flex-base 0 not equally distributing width if elements have different padding about flexbugs HOT 6 CLOSED

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.

from flexbugs.

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

from flexbugs.

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.

from flexbugs.

@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?

from flexbugs.

@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?

from flexbugs.

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

from flexbugs.