Chrome 108中column-count属性致浏览器崩溃问题及替代方案咨询

Chrome 108.0.5359.99版本的Blink内核存在column-count相关的渲染缺陷，当容器内包含复杂内容（如嵌套组件、动态生成元素、大量媒体/文本）时，多列布局的渲染逻辑可能触发内存泄漏或死循环，导致浏览器进程崩溃。这类问题属于版本特定的bug，后续Chrome更新通常会修复这类布局引擎的问题。

以下几种布局方式可以稳定实现两列效果，且兼容性更可靠：

Flexbox布局（推荐，现代浏览器兼容） #

通过弹性盒模型实现自适应两列，渲染性能稳定：

.two-column-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem; /* 自定义列间距 */
}

.two-column-container > * {
  flex: 0 0 calc(50% - 0.75rem); /* 减去gap的一半，避免容器宽度溢出 */
  box-sizing: border-box;
}

Grid布局（适合规整的等宽列） #

网格布局可以直接定义列数，代码更简洁：

.two-column-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

浮动布局（兼容旧版浏览器） #

如果需要兼容更老的浏览器，浮动布局是传统解决方案：

.two-column-container {
  overflow: hidden; /* 清除浮动，避免容器高度塌陷 */
}

.two-column-container > * {
  float: left;
  width: 50%;
  box-sizing: border-box;
  padding: 0 0.75rem; /* 替代gap实现间距 */
}

内容的提问来源于stack exchange，提问作者EFF