margin on the child element instead of
padding on your
The calculation is done without
padding. So; adding
padding to the
flex element is not giving you your expected width by the spec.
For example, the available space to a flex item in a floated auto-sized flex container is:
- the width of the flex container’s containing block minus the flex container’s margin, border, and padding in the horizontal dimension
- infinite in the vertical dimension
Why is the padding not calculated? That’s what the spec wants.
Determine the available
crossspace for the
flexitems. For each dimension, if that dimension of the
flex container’s content box is a definite size, use that; if that dimension of the
flex containeris being sized under a
max-contentconstraint, the available space in that dimension is that constraint; otherwise, subtract the flex container’s margin, border, and padding from the space available to the flex container in that dimension and use that value. This might result in an infinite value.
If you subtract the
margin from the element’s size, you get:
1A + 1B = 2A
However, after you did that, the padding was added to the element. The more elements, the more padding. That’s not being calculated in the width, causing your statement to be false.