[Stackoverflow] IE11 -15%

https://stackoverflow.com/q/47053286/8554766

HTML

<body>
<div id='content'>
<div class='menu' id='menu'></div>
<div class='content-area'>
<button onclick=toggleLeft() >Show/hide 'left: -15%'</button>
</div>
</div>

</body>

CSS

#content {
  display: -ms-grid;
  display: grid;
  
  -ms-grid-columns: 15% minmax(85%, 1fr);
  grid-template-columns:  15% minmax(85%, 1fr);
  
  -ms-grid-rows: 1fr;
  
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}


.menu {
  background: #D2691E;
  position: fixed;
  left: -15%;
  height: 100%;

  -ms-grid-row: 1;
  grid-row-start: 1;
  
  -ms-grid-row-span: 1;
  grid-row-end: 1;

}

.content-area {
  background: #191970;
    
  -ms-grid-row: 1;
  grid-row-start: 1;
  
  -ms-grid-row-span: 1;
  grid-row-end: 1;
  
  -ms-grid-column: 2;
  grid-column-start: auto;
  
  -ms-grid-column-span: 2;
  grid-column-end: span 2;
  
}

JavaScript

function toggleLeft() {
  var menu_navigation = document.getElementById('menu');
  if (menu_navigation.style.position === 'fixed' || menu_navigation.style.position === '') { 
    open();
    stopAnimation();
  } else {
    close();
  }
}

function close() {
  var menu_navigation = document.getElementById('menu');
  if (menu_navigation.style.position !== 'fixed') {
    menu_navigation.style.position = 'fixed';
    menu_navigation.style.left = '-15%';
    menu_navigation.style.witdh= '100%';
    menu_navigation.style.height = '100%';
  }  
}

function open() {
  var menu_navigation = document.getElementById('menu');
  if (menu_navigation.style.position !== 'relative') {
    menu_navigation.style.position = 'relative';
    menu_navigation.style.left = '0';
    menu_navigation.style.widh = 'auto';
    menu_navigation.style.height = 'auto';
  }
}