I have some flex elements within a CSS grid and I need to absolutely position one of the elements. I have set the width to 100% so that it takes up the entire column. On Firefox/Chrome/Safari it is working as expected(the element takes up 100% of the 40% width column), however, in IE, the element is not constrained by the 40% column and ends up taking up 100% of the grid. I have `position:relative;` set on the grid container, which I figured would restrict the width of the content within the column, but for some reason on IE it does not.

**Here's what it looks like in IE:**

[![enter image description here](https://i.stack.imgur.com/AlYwG.png)](https://i.stack.imgur.com/AlYwG.png)

**And here's the desired result(and how it looks in modern browsers):**

[![enter image description here](https://i.stack.imgur.com/ErOHb.png)](https://i.stack.imgur.com/ErOHb.png)

Any ideas on how to resolve this?

```css
.container {
  display:-ms-grid;
  display:grid;
  -ms-grid-columns:40% 60%;
      grid-template-columns:40% 60%;
  position:relative;
}

.ele {
  display:-ms-flex;
  display:flex;
}
  .ele:first-child {
    -ms-grid-column-span:1;
    -ms-grid-column:1;
        grid-column:1 / span 1;
    -ms-grid-row-span:1;
    -ms-grid-row:1;
        grid-row:1;
    position:absolute;
    width:100%;
  }
  .ele:nth-child(2) {
    -ms-grid-column-span:1;
    -ms-grid-column:2;
        grid-column:2 / span 1;
    -ms-grid-row-span:1;
    -ms-grid-row:1;
        grid-row:1;
  }
```

```html
<div class="container">
  <div class="ele">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam eros quis rhoncus venenatis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In nec dui interdum, tincidunt metus sed, faucibus est. Aliquam hendrerit arcu in libero pellentesque euismod. Ut eleifend tortor at auctor pellentesque. Curabitur sit amet tincidunt neque. Aliquam ultricies, dolor lobortis euismod pellentesque, lorem arcu egestas lorem, nec consequat sem risus eu risus. Ut eu ex volutpat, semper est id, elementum massa. Praesent metus nibh, pharetra et condimentum vitae, aliquam et massa. Ut vitae efficitur magna. Quisque risus massa, finibus a viverra et, accumsan eget velit. In egestas vestibulum suscipit. Sed vitae iaculis ligula. Suspendisse massa nisl, rutrum a accumsan sit amet, molestie eget sapien. Suspendisse sed nisl quis ligula porta sodales sit amet eget nunc. Mauris luctus lorem tellus, eu egestas diam porttitor nec. 
  </div>
  <div class="ele">
    Some more content goes here
  </div>
</div>
```