双列Flex布局手风琴：单列高度变化影响另一列的解决方法

问题背景 #

实现双列手风琴组件时遇到两个问题：

• 使用Flex布局并开启flex-wrap时，展开某一列的手风琴会导致另一列的元素位置偏移
• 使用CSS columns属性配合break-inside: avoid-column时，展开多个手风琴后部分元素会跨列移动

解决方案 #

核心思路是将手风琴元素手动划分为两个独立的列容器，让每列的布局完全独立，这样某一列的手风琴展开只会改变本列高度，不会影响另一列的元素排列。

具体实现步骤 #

1. 调整HTML结构：在原.wrap容器内新增两个列容器（如.col-left和.col-right），将手风琴元素平均分配到两个列中
2. 修改CSS样式：让.wrap保持Flex布局，两个列容器各占calc(50% - 10px)的宽度，列内的.foldout占满列宽
3. 保留原有交互逻辑：JS的点击展开/收起逻辑无需修改

修改后的完整代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="foldouts">
    <div class="wrap">
        <!-- 左侧列容器 -->
        <div class="col-left">
            <div class="foldout">
                <div class="header">
                    <h3>Headline 1</h3>
                </div>
                <div class="hiddencontent">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
                </div>
            </div>
            <div class="foldout">
                <div class="header">
                    <h3>Headline 3</h3>
                </div>
                <div class="hiddencontent">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
                </div>
            </div>
            <div class="foldout">
                <div class="header">
                    <h3>Headline 5</h3>
                </div>
                <div class="hiddencontent">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
                </div>
            </div>
        </div>
        <!-- 右侧列容器 -->
        <div class="col-right">
            <div class="foldout">
                <div class="header">
                    <h3>Headline 2</h3>
                </div>
                <div class="hiddencontent">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
                </div>
            </div>
            <div class="foldout">
                <div class="header">
                    <h3>Headline 4</h3>
                </div>
                <div class="hiddencontent">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
                </div>
            </div>
            <div class="foldout">
                <div class="header">
                    <h3>Headline 6</h3>
                </div>
                <div class="hiddencontent">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

section.foldouts .wrap {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* 替代margin，更简洁的间距控制 */
}
/* 列容器样式 */
section.foldouts .wrap .col-left,
section.foldouts .wrap .col-right {
  width: calc(50% - 10px);
}
section.foldouts .wrap .foldout {
  width: 100%;
  background: #e5e5e5;
  margin-bottom: 10px; /* 手风琴之间的间距 */
}
section.foldouts .wrap .header {
  cursor: pointer;
  padding: 0.3em;
  border-bottom: 1px solid #b4b4b4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
}
section.foldouts .wrap .hiddencontent {
  display: none;
  padding: 0.5em;
}
section.foldouts .wrap .hiddencontent p {
  font-size: 20px;
}

JS

$('.header').click(function(){
  $(this).toggleClass('active');
  $(this).next('.hiddencontent').slideToggle();
})

方案原理 #

两个列容器是独立的Flex子元素，各自内部的手风琴展开只会改变列容器的高度，不会触发父容器的重排导致另一列元素移位；手动分配元素到列中，避免了flex-wrap或columns自动排列带来的布局不稳定问题。

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