html - 使用 div 的固定高度创建带有 flex 方向列的自动新行

Question

我正在使用 column 类型的 flex 来显示内容列表。如何在不改变div高度的情况下自动制作新的内容行？必须填充 div 的右侧部分。

溢出到新行不起作用。 Flex 方向行有效，但我不需要它。

.container {
  width: 50vw;
  height: 100px;
  background-color: lightcoral;
}
.container ul{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

<div class="container">
  <ul>
    <li>Number one</li>
    <li>Number two</li>
    <li>Number three</li>
    <li>Number four</li>
    <li>Number five</li>
    <li>Number six</li>
    <li>Number seven</li>
    <li>Number eight</li>
  </ul>
</div>

Answer 1

对于列表你需要继承高度，或者设置为父级的100%

.container {
  width: 50vw;
  height: 100px;
  background-color: lightcoral;
}
.container ul{  
  height: inherit;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

<div class="container">
  <ul>
    <li>Number one</li>
    <li>Number two</li>
    <li>Number three</li>
    <li>Number four</li>
    <li>Number five</li>
    <li>Number six</li>
    <li>Number seven</li>
    <li>Number eight</li>
  </ul>
</div>