Chrome 64 columns display bug

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <button onclick="toggleColumns()">Toggle columns</button>
    <div>
    	<div class="scrollable">
        <div id="multiColumn" class="multi-column">
          <div id="order65" class="object-item-repeat">
            <div class="object-item item-type-togo">
              <dl>
                <dt>#65</dt>
                <dd class="item-status">In Progress</dd>
                <dd class="item-type"><span class="fa fa-cutlery"></span> To Go</dd>
                <dd class="item-time"><span>Promised Time 3:30 PM - 3:35 PM</span></dd>
                <dd class="item-customer-info item-customer-name truncate"><span class="info-icon"><span class="glyphicon glyphicon-user"></span></span> TOM M</dd>
                <dd class="item-customer-info item-customer-car"><span class="info-icon"><span class="fa fa-car"></span></span> test</dd>
              </dl>
            </div>
          </div>
          <div id="order66" class="object-item-repeat">
            <div class="object-item item-type-togo">
              <dl>
                <dt>#66</dt>
                <dd class="item-status">In Progress</dd>
                <dd class="item-type"><span class="fa fa-cutlery"></span> To Go</dd>
                <dd class="item-time"><span>Promised Time 3:30 PM - 3:35 PM</span></dd>
                <dd class="item-customer-info item-customer-name truncate"><span class="info-icon"><span class="glyphicon glyphicon-user"></span></span> TOM M</dd>
                <dd class="item-customer-info item-customer-car"><span class="info-icon"><span class="fa fa-car"></span></span> test</dd>
              </dl>
            </div>
          </div>
          <div id="order67" class="object-item-repeat">
            <div class="object-item item-type-togo">
              <dl>
                <dt>#67</dt>
                <dd class="item-status">In Progress</dd>
                <dd class="item-type"><span class="fa fa-cutlery"></span> To Go</dd>
                <dd class="item-time"><span>Promised Time 3:30 PM - 3:35 PM</span></dd>
                <dd class="item-customer-info item-customer-name truncate"><span class="info-icon"><span class="glyphicon glyphicon-user"></span></span> TOM M</dd>
                <dd class="item-customer-info item-customer-car"><span class="info-icon"><span class="fa fa-car"></span></span> test</dd>
              </dl>
            </div>
          </div>
        </div>
    	</div>
    </div>
  </body>
</html>

// Code goes here

function toggleColumns(){
  $('#multiColumn').toggleClass('multi-column');
}

.multi-column {
    columns: 2;
}

.multi-column>div {
    break-inside: avoid-column;
}

.scrollable {
    overflow-y: scroll;
    height: 500px;
    padding-top: 8px;
}

/* order item */

.object-item>dl dd,
.object-item>dl dt,
.object-item .item-order-number {
    font-size: 16px;
    font-weight: 700;
    margin-right: 8px;
}

.object-item {
    background: #FEF3CC;
    border: 2px solid #DADADA;
    margin: 0 0 16px 0;
    padding: 8px;
}

.selected-order .object-item {
    border-color: #00f;
}

.object-item.item-type-delivery {
    background: #D6EBFA;
}

.object-item>dl dt,
.object-item .item-order-number {
    float: left;
}

.object-item>dl dt {
    margin-top: 2px;
}

.object-item>dl {
    margin: 0;
}

.object-item dl .item-status {
    border: 2px solid #dadada;
    border-radius: 6px;
    float: right;
    font-weight: 700;
    padding: 0 4px;
    text-transform: uppercase;
    font-size: 14px;
}


.object-item dl .item-status {
    background: #fff;
    color: #6d6d6d;
}

.object-item dl .item-time {
    clear: both;
    float: left;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    margin-top: 5px;
    letter-spacing: -.5px;
}

.object-item dl .item-type {
    clear: right;
    float: right;
    font-weight: 700;
    text-transform: capitalize;
    height: 20px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.object-item dl .item-customer-info {
    clear: both;
    font-weight: 400;
}

.object-item dl .item-customer-name {
    font-weight: 700;
}


.object-item-repeat {
    overflow: hidden;
}