Переполнение CSS прокрутки флажков в Chrome

Question

Я использую несколько списков флажков в макете с двумя столбцами, которые находятся внутри контейнера, чтобы прокручивать и ограничивать размер списка.

Теперь иногда флажки (без их меток) отображаются, даже если они находятся за пределами видимой части прокрутки. Если я уберу опцию столбца, визуальный сбой исчезнет. Приведенный ниже фрагмент иллюстрирует проблему, я полагаю, что это с помощью Chrome 75.0.3770.100. Firefox не создает проблемы. IE и Edge, похоже, тоже в порядке.

Это известная ошибка с известным обходным решением или я что-то не так делаю?

Кроме того, снимок экрана для людей с браузерами, которые не создают проблему:

div.parent{
  column-count: 2;
}
div.list{
  margin-top: 100px;
  height: 100px;
  width: 200px;
  overflow-y: auto;
  border: 1px solid;
}

label{
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
input{
  position: relative;
  top: 2px;
}

<div class="parent">
  <div class="list">
    <label><input type="checkbox">entry a text long enough to overflow</label>
    <label><input type="checkbox">entry b text long enough to overflow</label>
    <label><input type="checkbox">entry c text long enough to overflow</label>
    <label><input type="checkbox">entry d text long enough to overflow</label>
    <label><input type="checkbox">entry e text long enough to overflow</label>
    <label><input type="checkbox">entry f text long enough to overflow</label>
    <label><input type="checkbox">entry g text long enough to overflow</label>
    <label><input type="checkbox">entry h text long enough to overflow</label>
    <label><input type="checkbox">entry i text long enough to overflow</label>
    <label><input type="checkbox">entry j text long enough to overflow</label>
    <label><input type="checkbox">entry k text long enough to overflow</label>
    <label><input type="checkbox">entry l text long enough to overflow</label>
  </div>
  <div class="list">
    <label><input type="checkbox">entry a text long enough to overflow</label>
    <label><input type="checkbox">entry b text long enough to overflow</label>
    <label><input type="checkbox">entry c text long enough to overflow</label>
    <label><input type="checkbox">entry d text long enough to overflow</label>
    <label><input type="checkbox">entry e text long enough to overflow</label>
    <label><input type="checkbox">entry f text long enough to overflow</label>
    <label><input type="checkbox">entry g text long enough to overflow</label>
    <label><input type="checkbox">entry h text long enough to overflow</label>
    <label><input type="checkbox">entry i text long enough to overflow</label>
    <label><input type="checkbox">entry j text long enough to overflow</label>
    <label><input type="checkbox">entry k text long enough to overflow</label>
    <label><input type="checkbox">entry l text long enough to overflow</label>
  </div>
</div>

Answer 1

column-count: 2; CSS не работает должным образом, изменение с display: flex; justify-content: space-between; решит вашу проблему.Спасибо

div.parent{
  display: flex;
  justify-content: space-between;
}

div.parent{
  display: flex;
  justify-content: space-between;
}
div.list{
  margin-top: 100px;
  height: 100px;
  width: 200px;
  overflow-y: auto;
  border: 1px solid;
}

label{
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
input{
  position: relative;
  top: 2px;
}

<div class="parent">
  <div class="list">
    <label><input type="checkbox">entry a text long enough to overflow</label>
    <label><input type="checkbox">entry b text long enough to overflow</label>
    <label><input type="checkbox">entry c text long enough to overflow</label>
    <label><input type="checkbox">entry d text long enough to overflow</label>
    <label><input type="checkbox">entry e text long enough to overflow</label>
    <label><input type="checkbox">entry f text long enough to overflow</label>
    <label><input type="checkbox">entry g text long enough to overflow</label>
    <label><input type="checkbox">entry h text long enough to overflow</label>
    <label><input type="checkbox">entry i text long enough to overflow</label>
    <label><input type="checkbox">entry j text long enough to overflow</label>
    <label><input type="checkbox">entry k text long enough to overflow</label>
    <label><input type="checkbox">entry l text long enough to overflow</label>
  </div>
  <div class="list">
    <label><input type="checkbox">entry a text long enough to overflow</label>
    <label><input type="checkbox">entry b text long enough to overflow</label>
    <label><input type="checkbox">entry c text long enough to overflow</label>
    <label><input type="checkbox">entry d text long enough to overflow</label>
    <label><input type="checkbox">entry e text long enough to overflow</label>
    <label><input type="checkbox">entry f text long enough to overflow</label>
    <label><input type="checkbox">entry g text long enough to overflow</label>
    <label><input type="checkbox">entry h text long enough to overflow</label>
    <label><input type="checkbox">entry i text long enough to overflow</label>
    <label><input type="checkbox">entry j text long enough to overflow</label>
    <label><input type="checkbox">entry k text long enough to overflow</label>
    <label><input type="checkbox">entry l text long enough to overflow</label>
  </div>
</div>