0

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

migos
  • 86
  • 1
  • 6

1 Answers1

0

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

migos
  • 86
  • 1
  • 6
  • Thanks for posting the solution to this issue. I suggest you try to mark your own answer to this question after 48 hrs when it is available to mark. It can help other community members in the future in similar kinds of issues. Thanks for your understanding. – Deepak-MSFT Aug 24 '20 at 05:04