flex-grow not sizing flex items as expected

Question

It seems that the content inside a flex div affects its calculated size concerning the flex-grow property. Am I doing something wrong?

In the fiddle pr

Answer 1

flexbox doesn't respond well to margins, in my opinion.

The better approach / workaround I prefer is to make sure all flex children have 0 margins, set the flex container to justify-content: space-between;, and then give the children a total width less than 100%. The remainder will be your margin.

In other words, if you want two elements per row, set each to 49% wide and you'll have 2% space between them. Three elements, each at 32% wide and you'll have 2% between them. In the calculator example, the 0 cell should be 66% wide and the rest 32%.

Edit: Note that because reasons (namely that content-box is terrible), if any of your children have borders you'll need to use box-sizing: border-box for my suggestion to work properly.

https://jsfiddle.net/r3L1mtbe/2/