如何用CSS columns属性避免.fixedContainer内容跨列拆分？

直接给.fixedContainer添加break-inside: avoid样式就能解决问题，这个CSS属性专门用来阻止元素在列、分页或者区域内被拆分：

.fixedContainer {
  break-inside: avoid;
  /* 兼容旧版浏览器可添加以下前缀 */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

原理很简单：当元素设置了break-inside: avoid后，浏览器会确保该元素完整显示在同一列中。如果当前列剩余空间不足以放下整个.fixedContainer，它会自动被放到下一列完整展示，不会出现跨列拆分的情况。

目前主流浏览器（Chrome、Firefox、Edge等）都支持标准的break-inside: avoid，前缀版本是为了兼容一些较老的WebKit内核浏览器和分页场景。

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