为什么使用flex-wrap的flex-column会使容器溢出？

Question

我试图获得一个最大高度受限制的容器，以在带有包装的列中显示flexbox项。但是，它没有按预期工作。

如果您尝试编辑CSS并将.list设置为flex-direction: row，则使用宽度约束而不是高度约束，它会自动换行。

这是怎么回事？

用例位于popper.js元素内，因此不能删除absolute位置。

html {
  width: 100%;
}

.popover {
  position: absolute;
  border: 1px solid red;
  background-color: red;
  max-height: 200px;
  max-width: 100% !important;
  min-width: 0px;
}

.popover-content2 {}

.list {
  display: flex;
  flex-direction: column;
  max-height: 200px;
  flex-wrap: wrap;
}

.item {
  background-color: blue;
  width: 100px;
  padding: 30px;
  margin: 4px;
  flex-shrink: 0;
}

<div class="popover">
  <div>Top</div>
  <div class="popover-content">
    <div class="list">
      <div class="item">A</div>
      <div class="item">A</div>
      <div class="item">A</div>
      <div class="item">A</div>
      <div class="item">A</div>
      <div class="item">A</div>
    </div>
  </div>
</div>
</div>
</div>

Codepen