固定宽度容器内的动态CSS多列列表

Question

我想构建一个带有x轴溢出的列表，其中每个列表元素都显示在父div内的一个新列中，这个jsfiddle有一个例子：

https://jsfiddle.net/h06h5jzy/1/

这是我目前的代码：

#testDiv{
  width:200px;
  height:200px;
  background:#DDD;
}

ul{
  width:100%
  list-stype-type:none;
  padding:0;
  overflow:visible;
}

ul li{
  width:100%;
  background:blue;
  text-align:center;
  float:left;
  display:inline;
}

使用CSS多列属性将无法工作，因为我将在列表中包含动态数量的元素。我也尝试了float：left for list elements，但没有成功。

如何实现这一目标？

Answer 1

喜欢这个吗？

＆＃13;

＆＃13;

#testDiv {}

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
  list-style-type: none;
  padding: 0;
  overflow: visible;
}

ul li {
  width: 100px;
  height: 100%;
  background: blue;
}

＆＃13;

<div id="testDiv">

  <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</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</li>
    <li>Testing</li>
    <li>Testing</li>
    <li>Testing</li>

  </ul>


</div>

＆＃13;

＆＃13;

＆＃13;