Search code examples
htmlcssflexboxinternet-explorer-10

About `Flex Layout` in IE10 broswer (Window7)

When use flex layout, it works in Chrome, Safari... But, IE10 broswer(Window7) doest not work correctly. (I wrote the code in Component.module.scss file.)

In Chrome, Safari browsers inspector ...

.box {
  display: flex;
  display: -ms-flexbox;
  flex-direction: column;
  -ms-flex-direction: column;
}

In IE10 browser inspector (Window7)

.box {
  display: -ms-flexbox;
  // Below style does not appear like never declared in stylesheet
  // -ms-flex-direction: column;
}

Wirte the code at inline <div style="-ms-flex-direction: column;" />, it works.

How to fix it? or Is it already known issue?

+ develop environment: CRA(non eject) & react-app-polyfill

Solution

  • I found it. The problem is browsers list options. Add 'IE 10' in borwserslist.