两列弹性布局中的手风琴：改变一列的高度会影响其他列

Question

我想要两列手风琴。目前我使用弹性布局来做到这一点。但是，当在一列中展开手风琴时，它会影响另一列中的元素。如何在不影响另一列高度的情况下实现展开手风琴？

顺便说一句：我还尝试使用 simpel CSS columns (columns: 2;) 并给折叠容器break-inside:void-column; – 但是当在一侧展开一些手风琴时，它们开始移动到另一列......所以我无法使用 CSS 列计数来解决问题。

我为我的问题制作了一个CodePen：https://codepen.io/xj6652/pen/qBgqWBp

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

section.foldouts .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
section.foldouts .wrap .foldout {
  width: calc(50% - 10px);
  break-inside: avoid-column;
  background: #e5e5e5;
}
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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="foldouts">
    <div class="wrap">
    
        <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 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 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 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 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 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>
</section>

Answer 1

您需要在 HTML 中创建 2 列，对当前代码进行一个小更改：

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

section.foldouts .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

section.foldouts .wrap .foldout {
  width: calc(50% - 10px);
  break-inside: avoid-column;
  background: #e5e5e5;
}

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="foldouts">
  <div class="wrap">

    <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 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 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 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 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 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>
</section>