将HTML UL列表放入动态大小的DIV容器中，而不会丢失内容

我正在创建动态列表，有时有10个项目，有时有50个项目。我需要将此列表放置在一个容器内，该容器的高度/宽度因响应性设计而异。让我举几个例子：

这就是我所拥有的：

<style>
    .container{
        border:1px solid #ccc;
        height: 150px;
        width: 500px;
    }
</style>
<div class="container">
    <ul>
        <li>test sdfsdfs</li>
        <li>testsdf sdfsd</li>
        <li>test sdfsdfs</li>
        <li>testsdf sdfsd</li>
        <li>test sdfsdfs</li>
        <li>testsdf sdfsd</li>
        <li>test sdfsdfs</li>
        <li>testsdf sdfsd</li>
        <li>test sdfsdfs</li>
        <li>testsdf sdfsd</li>
    </ul>
</div>

这将导致以下情况：

我需要列表项始终位于div容器内，因此在上面的场景中，容器外的其余列表项应继续显示在右侧，直观地创建两列

限制：

HTML需要保持不变，除了添加更多列表项 容器的宽度和高度是动态的，因此它们可以变化。 如果容器太小，列表无法显示在另一列上，则其余列表将隐藏。 没有插件，即引导、基础等。 如果你需要更多的细节，请告诉我。提前谢谢你

您可以使用和flex-direction:column；如果给定一定的高度，一旦内容到达显示屏底部，就会得到一个新列：flex；父项

以下是有关浏览器支持的一些信息：

这是您的演示：

.集装箱{ 边框：1px实心ccc； 高度：150像素； 宽度：500px； } .container>ul { 显示器：flex； 柔性流：柱包裹； 身高：继承； 宽度：继承； 保证金：0； } .container>ul>li { flex:0自动； } 测试sdfsdfs 测试软件 测试sdfsdfs 测试软件 测试sdfsdfs 测试软件 测试sdfsdfs 测试软件 测试sdfsdfs 测试软件

---

这将更容易实现与引导。我敢肯定。然而，我不想为了一个问题而使用整个库。我也不应该是个白痴，先阅读你的全部文章，嗯？CSS3的特性继续给我留下深刻印象+1.