Chrome复选框的CSS滚动溢出

Question

我在容器内的两列布局中使用了几列复选框，以允许滚动并限制列表的大小。

现在，有时会显示复选框（不带标签），即使它们不在滚动div的可见部分之外。如果我删除了列选项，视觉毛刺就会消失。下面的代码段说明了这个问题，我使用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>