按从上到下的2列显示div

Question

我想按从上到下的顺序在2列中显示div：

我尝试了以下基于列数的解决方案，如果div的数目为偶数，则效果很好，但如果为奇数，则中断。

.container {
  column-count:2;
}
.square {
  box-sizing: border-box;
  border: 1px solid black;
  height: 200px;
  padding: 5px;
}

<div class="container">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>

然后我尝试了基于flex的解决方案，但似乎找不到该订单的解决方案：

    .container {
      display:flex;
      flex-wrap: wrap;
    }
    .square {
      box-sizing: border-box;
      border: 1px solid black;
      flex: 0 0 50%;
      height: 200px;
    }

<div class="container">
    <div class="square">1</div>
    <div class="square">2</div>
    <div class="square">3</div>
</div>

我想要实现的是这样的平滑处理：

Answer 1

将display:inline-block;width:100%;添加到正方形元素：

.container {
  column-count: 2;
}

.square {
  border: 1px solid black;
  height: 200px;
  display:inline-block;
  width:100%;
}

<div class="container">
  <div class="square">1</div>
  <div class="square">2</div>
  <div class="square">3</div>
</div>