CSS grid auto width in IE and MS Edge not working

Question

Have an IE and Edge specific problem. Fooling around with "CSS grid layout" and auto width seems not to work in IE 10/11 or even in newest version of Edge. (Works fine in Chrome and FireFox.)

CodePen link

.test {
  width 100%;
}

.test #contain {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50px 10px auto;
  -ms-grid-rows: 50px;
  grid-template-columns: 50px auto;
  grid-template-rows: 50px;
  grid-column-gap: 10px;
}

.test .sec1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  background-color: red;
}

.test .sec2 {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: red;
}

<div class="test">
  <div id="contain">
    <div class="sec1">1</div>
    <div class="sec2">2</div>
  </div>
</div>

So is the error on my part or did Microsoft make lame stuff again?

Besides I thought that Edge should have a full implementation of the latest CSS grid but I guess not since I still need to use -ms.

Answer 1

The issue that IE/Edge CSS Grid layout works according to old specs where

auto is equivalent to minmax(min-content, max-content).

And according to new specs

auto
As a maximum, identical to max-content. As a minimum, represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

---

In this example you don't need auto value, you need 1fr to occupy all remaining width. By the way some styles are redundant in you code. Demo:

.test {
  width 100%;
}

.test #contain {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50px 10px 1fr;
  -ms-grid-rows: 50px;
  grid-template-columns: 50px 1fr;
  grid-template-rows: 50px;
  grid-column-gap: 10px;
}

.test .sec1 {
  /* this is default value for IE/Edge, grid items always stack in first cell for IE/Edge */
  -ms-grid-row: 1;  /* redundant */
  -ms-grid-column: 1;  /* redundant */
  background-color: red;
}

.test .sec2 {
  /* this is default value for IE/Edge, grid items always stack in first cell for IE/Edge */
  -ms-grid-row: 1; /* redundant */
  -ms-grid-column: 3;
  /* all this value will be used by default due to auto-placement of grid items (which is not working in IE/Edge) */
  grid-column-start: 2; /* redundant */
  grid-column-end: 3; /* redundant */
  grid-row-start: 1; /* redundant */
  grid-row-end: 2; /* redundant */
  background-color: red;
}

<div class="test">
  <div id="contain">
    <div class="sec1">1</div>
    <div class="sec2">2</div>
  </div>
</div>