Firefox中CSS Columns自适应高度布局失效问题求助

你的布局失效核心原因有两点：

1. column-count属于流式多列排版，它会自动拆分内容填充列，而非将每个.item对应到独立列，和你要的“5个独立列”需求不匹配；
2. 给容器强制设置height:100%，直接阻断了布局随内容自适应拉伸的能力。

修复方案：改用Flex布局实现 #

Flex布局天生支持横向排列子元素，且能自动适配内容高度，完美匹配你的需求：

修改后的CSS

#outer-container {
  display: flex;
}

#inner-container {
  flex-grow: 1;
  display: flex; /* 启用Flex横向排列子项 */
  gap: 10px; /* 可选：给列之间添加间距 */
}

.item {
  flex: 1; /* 让每个列均分容器可用宽度 */
  break-inside: avoid;
  /* 移除height:100%，让高度随内容自动调整 */
}

对应HTML（结构无需改动）

<div id="outer-container">
  <div id="inner-container">
    <div class="item item-1">
      <b>Col 1</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type sp
    </div>
    <div class="item item-2">
      <b>Col 2</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="item item-3">
      <b>Col 3</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="item item-4">
      <b>Col 4</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    <div class="item item-5">
      <b>Col 5</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type sp
    </div>
  </div>
</div>

关键修改说明 #

• 移除所有height:100%设置，让容器高度完全由内容决定；
• 给#inner-container添加display:flex，将5个.item横向排列；
• 给.item设置flex:1，确保每个列宽度均分容器可用空间；
• 可选添加gap属性，控制列之间的间距，提升视觉效果。

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