Bootstrap 4 - multiple select does not highlight entire item when overflowing

Question

When using Bootstrap 4's form-control on a multiple select element, I'm having an issue with how a selected item is rendered when it overflows.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-3">
    <select multiple style="overflow-x: auto;" class="form-control">
      <option>asdf asdf asdf asdf asdf asdf asdf asdf</option>
      <option>123</option>
    </select>
  </div>
</div>

If I select the asdf... option, the blue highlight shows up for part of the item, but then as you scroll right it does not continue and the rest of the text is white on a white background which makes it very difficult to read.

See jsfiddle

Answer 1

It may not be the right approach but you can fix it by changing the display property of option tag

option{
  display: table-row;
}