I cannot find this issue mentioned anywhere else, so I’m documenting it here.
You can see the issue by visiting: http://codepen.io/brightonmike/pen/KwNLpo
With Flexbox, if you use the flex-wrap:wrap property and a defined value for flex-basis, IE has problems displaying the child elements if they have padding.
In Chrome, the elements are arranged correctly. The fifth element is on the second row, because we specified flex-wrap:wrap. Each element occupies 25% of the width as we specified in the flex shorthand property, regardless of the padding.
In IE (11):
In IE, the padding is affecting the widths of the child elements. They occupy greater than 25% of the total width, more like 35%. To get IE to display the same, we have to remove either the wrap property (this will make the elements all squash onto one line – which is not what we’re after), or you remove the flex-basis property and use width instead.
If anybody knows what the issue is here, or can explain why this happens, I’d love to know. It’s quite possible I’m pulling a major noob move also, being the new year and under the cosh of a nasty cold.