Bootstrap 4 flexible grid not working in IE

I'm using Bootstrap 4 to achieve a flexible grid. I'm running into an issue in IE 11 where flexbox isn't responding appropriately to a simple grid like this:

<div class="container-fluid">
  <table class="table table-hover">
    <tr class="row">
      <td class="col-sm-2 red">16.67%</td>
      <td class="col-sm-2 blue">16.67%</td>
      <td class="col-sm-3 green">25%</td>
      <td class="col-sm-1 yellow">8.33%</td>
      <td class="col-sm-1 orange">8.33%</td>
      <td class="col-sm-3 purple">25%</td>

Here is a Fiddle that works great in Chrome and Firefox. What can I do to remedy this in IE?

- - Source
comments powered by Disqus