jquery - 隐藏内容扭曲了 css 多列布局上的列

Question

我正在尝试获得一个 3 列网格，以便隐藏对象能够在同一列上显示和展开，而无需将内容移动到下一列或为其他列创建空白。这是我到目前为止所拥有的，但是当您单击按钮以显示隐藏内容时，下面的内容将移至下一列。我怎样才能让它保持在同一列？

$("#clickable").click(function(){
  $(".hidden_until_button_clicked").toggle();
});

#container {
  width: 100%;
  max-width: 700px;
  margin: 2em auto;
}
.flex-col {
  columns: 3;
  -webkit-columns: 3;
}
.box {
  height: auto;
  display: block;
  margin-bottom: 20px;
  page-break-inside: avoid;
  background-color: red;
}
.hidden_until_button_clicked{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div id="container" class="flex-col">
    <div class="box">Box 1</div>
    <div class="box">
      Box 2 <br />
      <button id="clickable">Click me</button>
      <div class="hidden_until_button_clicked">
        <p>This is all the extra content hidden until clicked</p>
      </div>
    
    </div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
    <div class="box">Box 7</div>
    <div class="box">Box 8</div>
  </div>

Answer 1

可以给点击后显示的div设置绝对位置:

$("#clickable").click(function(){
  $(".hidden_until_button_clicked").toggle();
});

#container {
  width: 100%;
  max-width: 700px;
  margin: 2em auto;
}
.flex-col {
  columns: 3;
  -webkit-columns: 3;
}
.box {
  height: auto;
  display: block;
  margin-bottom: 20px;
  page-break-inside: avoid;
  background-color: red;
}
.hidden_until_button_clicked{
  display: none;
  position: absolute;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div id="container" class="flex-col">
    <div class="box">Box 1</div>
    <div class="box">
      Box 2 <br />
      <button id="clickable">Click me</button>
      <div class="hidden_until_button_clicked">
        <p>This is all the extra content hidden until clicked</p>
      </div>
    
    </div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
    <div class="box">Box 5</div>
    <div class="box">Box 6</div>
    <div class="box">Box 7</div>
    <div class="box">Box 8</div>
  </div>