IE11: Column inside a row may overflow its parent

[FrancescoCioria]

description

On IE11 if the content of a column rendered inside a row has a base width bigger than the row itself, the column will overflow its parent even if it shouldn't

how to reproduce

<FlexView width={100}>
  <FlexView column>
    asduhaudhausda asdoihaid dasidaishd alodhiashd alidhiasdh alisdhiashd aoidshaisdh oasdihasidh aidhasidh oaidhaisdh aoidhaisdh asdhaosidh
  </FlexView>
</FlexView>

On chrome the text column is 100px wide, on IE11 it's as wide as its content...

FlexView should somehow prevent this bug or, if not possible, warn the user when in dev that they might face it.

specs

Apparently not only IE11 fails at forcing the column to not exceed its parent but it also ignores an explicit max-width if set to 100%....

I found this possible fix: add style={{ maxWidth: 99.99 }} to the column (any value apart from 100% is correctly understood by IE11)

We could:

1. add that fix to any FlexView column -> very breaking, implicit and opinionated
2. only in dev: if I'm a column + my parent is a flexview row + I don't have an explicit basis/width/max-width -> log a warning that link to a section in the readme that explain the issue and how to manually fix it

misc

{optional: other useful info}

[FrancescoCioria]

or we use bowser:

detectBrowser() {
  return window && bowser._detect(window.navigator.userAgent);
}

getStyle() {
  const isIE = this.detectBrowser() === 'msie';
  const style = pick(this.props, [
    'width',
    'height',
    'marginLeft',
    'marginTop',
    'marginRight',
    'marginBottom'
  ]);
  return {
    ...this.getFlexStyle(),
    ...style,
    maxWidth: (this.props.column && isIE) ? '99.99%' : undefined,
    ...this.props.style
  };
}