form-choice__label doesn't wrap in IE

[remco-freshheads]

Text in <label class="form-choice__label">...</label> breaks through the width set on a layout__item, found in IE10:

[martinbroos]

This might be a possible fix:
https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container

[remco-freshheads]

I've already tried it with max-width: 100%;, but that won't change a thing, even when i've set it to 10px. The other attributes are already there (box-sizing: border-box + padding on the container).

[martinbroos]

It looks like we can only solve this by adding a browser hack to target IE10. The problem is that this is not possible without javascript. CSS browser hacks like:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .selector { property:value; } }

Will also target IE11 where the problem doesn't occur. We could also stop using inline-flex but that's a step back in my opinion.
I suggest we leave this to the developer, if you have long radio / checkbox labels and you want to support IE10 and below you must insert a browser hack in your code.
For options see: https://gist.github.com/vidaaudrey/c16774076391d09e7ec7dbb7ed7a3189

[remco-freshheads]

Another problem found caused by the styling from this label.

This is solved if the :before has display: inline-block instead of block. And the label shouldn't have display: inline-flex..

[martinbroos]

Ok if more problems occur with using flexbox we should drop it and go for the safer option of using display inline-block. There are not many advantages of using inline-flex in this situation anyway.

[martinbroos]

Let't check if this problem still occurs and if PR should be merged. IE10 support is no longer required but it should also wrapping when other html elements are used it checkbox label.