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

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

这是我当前的代码：

#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用于列表元素，但没有成功

如何才能做到这一点？

像这样

#testDiv{}
保险商实验室{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
宽度：200px；
高度：200px；
列表样式类型：无；
填充：0；
溢出：可见；
}
ulli{
宽度：100px；
身高：100%；
背景：蓝色；
}

测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试

我希望我编辑的答案中的每一列上都有一个元素。变更溢出：可见；溢出：隐藏；如果你想在一定的宽度上切断