css - 将额外的元素发送到下一列 CSS

Question

我正在努力实现以下目标，如果有更多内容，我需要将额外的元素发送到下一栏。此外，父级的宽度应基于此减少/扩展。自 2 小时以来，我一直在敲头，感谢您的帮助。如果我们可以实现的话，我对 flexbox 没意见。

.card-body {
  height: 200px;
  border: 1px solid;
  padding: 10px;
}

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

<div class="card-body">
  <ul>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing 1
    </li>
    <li>
      Testing 2
    </li>
    <li>
      Testing 3
    </li>
  </ul>
</div>

Answer 1

您需要限制 ul 的高度，否则它只会溢出父容器:

.card-body {
  height: 150px;
  border: 1px solid;
  padding: 10px;
}

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height:100%;
  margin:0;
}

<div class="card-body">
  <ul>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing
    </li>
    <li>
      Testing 1
    </li>
    <li>
      Testing 2
    </li>
    <li>
      Testing 3
    </li>
  </ul>
</div>