When using css grid in IE, elements overlap each other. How to fix?

Question

css

We need to fix some of the code written in css grid. Nobody checked what was written on IE11, they only added code with autoprefixer. And as it turned out, all the elements overlap each other. Here is a sample code that works fine in all browsers except IE:

<div class="histories-container">
  <div class="event">1</div>
  <div class="event">2</div>
  <div class="event">3</div>  
  <div class="event">4</div>
  <div class="event">5</div>
</div>

.histories-container {
      display: -ms-grid;
      display: grid;
      -ms-grid-rows: 1fr;
      -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr;
    }
    
    .event:nth-child(2n) {
        -ms-grid-column: 2;
        grid-column-start: 2;
        -ms-grid-column-align: end;
        }
    
     .event:nth-child(2n+1) {
        -ms-grid-column: 1;
        grid-column-start: 1;
        -ms-grid-column-align: start;
        justify-self: start;
      }

https://www.w3schools.com/code/tryit.asp?filename=...
Found a solution using:
nth-child(1,2,3...n) {
-ms-template-row:.. ...
}
But there you need to know the exact number of elements. In my case, it is completely dynamic and can have any set. Tell me how to solve, I do not want to rewrite everything.

Answer 1

write like this

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
.histories-container
   display: flex;
   flex-wrap: wrap;

.event
   width: 100%;
   min-height: 1px;
   flex: 0 0 8.333333333333332%;
   max-width: 8.333333333333332%;