奇怪的布局行为，CSS 列在 Chrome 中包裹溢出的元素答案

【问题标题】：Odd layout behaviour with css columns wrapping overflowing elements in Chrome奇怪的布局行为，CSS 列在 Chrome 中包裹溢出的元素
【发布时间】：2022-01-23 16:07:38
【问题描述】：

我试图在我的 CSS 中隐藏半溢出的项目。我发现了一个使用 css 列的好方法：https://stackoverflow.com/a/48378030/1305699

它在 Firefox 中运行良好，但在 Chrome 中，我发现在某些看似随机的组合下出现了一些非常奇怪的行为。例如，我设法通过向其中一个项目添加高度来重新生成它，当容器具有某些特定大小时，它会导致布局随机闪烁成非常奇怪的大小。

这是正常工作：

但有时当最后一个项目带有height: 20px 样式时，它随机看起来像这样：

在某些位置，chrome 甚至认为它在（隐藏的）第二列中正确渲染了它，但实际上它在第一列中被绘制了一半，并且大小奇怪：

有没有人看到这个问题并知道解决方案或解决方法？

html,
body {
  height: 100%;
  width: 100%;
}

#container {
  padding: 5px;
  height: 50px;
  resize: both;

  overflow: hidden;
}

#container-2 {
  height: 100%;
  width: 200%;
  column-count: 2;
  column-fill: auto;
}

.item {
  background: aliceblue;
  margin: 2px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  overflow: hidden;
}

.item div {
   margin: 0.3rem;
}

.item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <div id="container" style="width: 150px; outline: 1px red solid;">
    <div id="container-2">
      <div class="item">ONE LINE</div>
      <div class="item">
        <div>i</div><span>SECOND LINE</span>
      </div>
      <div class="item">
        <div>i</div><span>THIRD LINE</span>
      </div>
      <div class="item">
        <div>i</div><span style="height: 20px;">FOURTH LINE</span>
      </div>
    </div>
  </div>
</body>

</html>

【问题讨论】：

标签： html css

【解决方案1】：

啊，原来我需要在项目上使用break-inside: avoid，这使得列避免尝试打破列上的项目。

https://css-tricks.com/almanac/properties/b/break-inside/

【讨论】：