将 HTML UL LIST 放入动态大小的 DIV 容器中而不丢失内容

Question

我正在创建动态 <ul> 列表，有时有 10 <li> 项，有时有 50 <li> 项。我需要将此列表放在 <div> 容器中（其 height/width 由于响应式设计而有所不同）。让我给你举个例子：

这是我的：

<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 需要保持不变，除了添加更多列表项
.container 宽度和高度是动态的，因此它们可以变化。
如果容器太小，列表无法显示在另一列中，则其余列表将隐藏。
无插件（即 Bootstrap、Foundation 等）

如果您需要更多details.Thank，请提前告诉我。

Answer 1

您可以使用 display:flex property 和 flex-direction: column; 执行此操作，如果您给定一定的高度，一旦内容到达 display: flex; 父级的底部，您将获得一个新列物品。

以下是有关浏览器支持的一些信息：http://caniuse.com/#feat=flexbox

这是您的演示：

.container {
  border: 1px solid #ccc;
  height: 150px;
  width: 500px;
}

.container > ul
{
  display: flex;
  flex-flow: column wrap;
  height: inherit;
  width: inherit;
  margin:0;
}

.container > ul > li
{
  flex: 0 0 auto;
}

<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>

将 HTML UL LIST 放入动态大小的 DIV 容器中而不丢失内容

fit HTML UL LIST inside dynamic sized DIV container without losing content

html

css

list

html-lists