Bootstrap custom checkbox render bug when using CSS column-width

I use Bootstrap's (version 4) custom checkboxes. If I align them using column-width in their parent container, the checkboxes in the last column do not appear in IE 11. In Chrome and FF it is OK.

The label text is visible but the pseudo-elements which contain the actual custom checkbox are not. Do you have any workaround for this render bug?

Below is my code and you can check it here in JS Bin: https://jsbin.com/wacilucepa/1/edit?html,css,output

CSS:

.container {
  column-width: 100px;
  box-sizing: border-box;
}

HTML:

<div class="container">
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check1"/>
      <label class="custom-control-label" for="check1">test1</label>
    </div>
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check2"/>
      <label class="custom-control-label" for="check2">test2</label>
    </div>
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check3"/>
      <label class="custom-control-label" for="check3">test3</label>
    </div>
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check4"/>
      <label class="custom-control-label" for="check4">test4</label>
    </div>
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check5"/>
      <label class="custom-control-label" for="check5">test5</label>
    </div>
    <div class="custom-checkbox custom-control">
      <input type="checkbox" class="custom-control-input" id="check6"/>
      <label class="custom-control-label" for="check6">test6</label>
    </div>
  </div>