UIKit / IE11 bug

Bug where uk-width-expand fails on larger breakpoints

by Peter Knight

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
<!--START: The bug is experienced in IE 11 - On largest breakpoints, the Col 2 Div floats to the right instead of being centered horizontally within the remaining uk-width-expand space-->

<div class="uk-grid">
  <div class="uk-width-auto uk-padding  col-1">
  <div class="uk-grid">
 <div class="uk-width-expand uk-padding col-2">Col 2</div>
<div class="uk-width-auto uk-padding  col-1">Col 1</div>
 
</div>
  
  </div>
  <div class="uk-width-expand uk-padding col-2">Col 2</div>
</div>

CSS

.col-2
{
  border:1px dotted #333;
  background: #32d296;
  max-width:600px; /* I need a max width */
  margin: 0 auto; /* I need it centered horizontally */
}

.col-1
{
  border:1px dotted #333;
  width:300px;
 
}

.col-2
{
  border:1px dotted #333;
  background: #32d296;
  max-width:600px; /* I need a max width */
  margin: 0 auto; /* I need it centered horizontally */
}