Chrome 64 columns display bug text

<!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">
          Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text 
          Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text 
          Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text 
          Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text 
          Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text 
          Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text 
          Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text 
          Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text 
          Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text 
        </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;
}