Flexbugs: IE (11), padding on child elements

[brightonmike]

I've noticed a weird discrepancy between IE (11) and other Browsers when you apply padding to elements that are child elements of a display:flex container.

I've documented it on my blog here:http://michaelgunner.co.uk/padding-flexbox-child-elements-causing-chaos-ie/

To summarise, if you set a flex-basis value and use flex-wrap:wrap, when you add padding to the elements in IE the layout totally screws up.

It's quite possible that being January, and also recovering from a bad cold/xmas/ny, I'm missing a beat somewhere and pulling a bit of a noob move - but I can't figure it out.

Code link: http://codepen.io/brightonmike/pen/KwNLpo

I'm aware I could remove the wrap property - but I want to my elements to wrap, not squeeze onto one line. Using width instead of basis fixes it too, but that reduces the flexibility of the code.

[gregwhitworth]

That is an interesting one and IE11 seems to have the same overall width for each item and padding on all sides as Chrome. In IE12 we made a lot of changes to match the latest spec which may have had some changes that didn't make it into IE11. Because of those changes IE12, FF and Chrome all render the same so going forward this won't be an issue. You've already stated the main work-around for this by setting a width. Can you give me your use case, I think in most flex situations this would be ok. The only ones that would be annoying is when you need to have X number of columns per row.

[leereamsnyder]

I've seen this before. It's in IE10 also.

I may be missing something else, but I believe the underlying issue is that in IE10/11, flex-basis and box-sizing:border-box; do not work like they do in FF/Webkit.

What seems to happen in IE is that the widths of flex children are sized according to the flex property, but _then_ left/right padding and border are added to calculate the total layout width of the element, regardless of the box-sizing setting. Meanwhile, other browsers respect box-sizing:border-box; and calculate the final width including padding/border.

In other words, when sizing flex children, IE10/11 seem to forget that box-sizing:border-box; exists.

I've run into this myself and others have noted it on Stack Overflow both here and here.

There are a couple of workarounds:

• if feasible, do not apply padding or border directly to a flex child. Allow the flex child to be a containing element to another element that will receive the padding or border. This is somewhat undesirable because avoiding this sort of extra markup is one the big benefits of box-sizing:border-box;.
• depending on the nature of the layout, another option might be to apply an explicit width or (better, probably) max-width to the flex children. In IE10/11, max-width on the flex children will use box-sizing: border-box; where flex will not.

The drawback is that this will interfere with flex-grow. For example, if you set flex: 1 1 25%, flex children will be able to grow (flex-grow:1;) but their maximum width will be constrained by that max-width;

So, for the pen by @brightonmike you'd do:

div { flex:0 1 25%; /* Everyone: start at 25%, do not grow, you're allowed to shrink */ padding:5em; max-width: 25%; /* No really IE10/11, do not grow bigger than 25% */ }

[brightonmike]

The width only works if you're using flex-direction:row. For column direction, it's not a fix, because the flex-basis applies to height not width. You could then use height instead I suppose, but that's starting to sound messy/hacky to me if you have a more complex layout that flicks between row and column layouts. The whole point I imagine of flex-basis, was to do away with height/width and be able to handle a minimum "length" regardless of axis. I'm still in my early days with flexbox though, so correct me if I'm mis-interpreting.

In my use case, I did need X number of columns.

Ultimately, the only workaround I was satisfied with was the first suggested by @leereamsnyder which is what I originally implemented. But, this does mean sticking in extra markup for every flex child that you need padding for.

Would it be fair to say at this point that this is a bug? I definitely think it's worth highlighting somewhere.

[gregwhitworth]

Yes it most definitely is a bug and was fixed in October. When the new build ships this should no longer be an issue.

[noahbuscher]

Any idea when that might be, @gregwhitworth?

[gregwhitworth]

@NoahBuscher I unfortunately can't speak to when the product will ship. Sorry.

[brightonmike]

Thank you @gregwhitworth for clarifying and good news. Meanwhile, is it worth sticking a note about this somewhere on here just to make anyone aware of it until the fix ships out.

[philipwalton]

I added flexbug 7 for this via d365e3a79e9771a94106a7ba35caa4f144b6d1bf.

[OlivierPerceboisGarve]

I confirm that this bug is still actual and that it can be worked around using max-width

[philipwalton]

@olivvv I'm not sure what you're saying. Are you implying the current workarounds aren't sufficient?

[OlivierPerceboisGarve]

No the workaround is fine, but if I understood this thread right, a fix was supposed to be implemented at browser level. I still see the bug in IE11. tbh its in a VM, I ll check tomorrow on a real pc.

[philipwalton]

if I understood this thread right, a fix was supposed to be implemented at browser level

The fix is in the Edge browser, not in IE11.

[heyallan]

Using pseudo-elements instead of padding worked for my use case, as pseudo-elements doesn't count as width _a priori_. I still have to test in detail.