CSS中容器宽度的扩展

我有一个包含n li元素的列表，父ul元素有一个最大高度规则。我想做的是，当li元素溢出ul元素时，扩展ul的宽度

假设我有20个li元素，每个元素的高度为20px，最大高度值为100px。在这种情况下，ul元素必须有20/（100px/20px）=4列

当我有一个固定的宽度值时，CSS会自动扩展ul的高度，但在固定的高度中，我找不到任何方法来扩展它相对于li元素数量的宽度

我尝试了N个具有明确规则的子选择器，但它不起作用：

---

在CSS中有没有类似的功能？

我不知道用CSS就可以实现这一点。为了解决您的问题，我提出了一个javascript/jQuery解决方案

请参阅工作演示

在演示中使用

ul

max height

和

li

height

CSS值，查看jQuery如何处理不同的值。这是一个非常简洁的小解决方案

---

HTML

---

jQuery

---

+1对于一个非常有趣的测试用例，我实际上是以一种类似于您的方式做的，但我正在寻找纯css解决方案。谢谢你的回答。

<ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>

ul li {
    width:50px;
    background:#eee;
    list-style:none;
    float:left;
}
div {
    width:200px;
    overflow:hidden;
    border:1px solid red;
}
ul {
    max-height:100px;
    overflow:auto;
    width:auto;
    position:absolute;
    border:1px solid gray

}
ul li:nth-child(5n+1) {
    background:red;
    clear:both
}

<ul>
    <li>test 01</li>
    <li>test 02</li>
    <li>test 03</li>
    <li>test 04</li>
    <li>test 05</li>
    <li>test 06</li>
    <li>test 07</li>
    <li>test 08</li>
    <li>test 09</li>
    <li>test 10</li>
    <li>test 11</li>
    <li>test 12</li>
    <li>test 13</li>
    <li>test 14</li>
    <li>test 15</li>
    <li>test 16</li>
    <li>test 17</li>
    <li>test 18</li>
    <li>test 19</li>
    <li>test 20</li>
</ul>

ul 
{
    max-height:100px;
    position:absolute;
    border:1px solid gray;
}
ul li 
{
    width:50px;
    height:20px;
    background:#eee;
    list-style:none;
    float: left;
    margin: 0; 
    padding: 0;
    border: none;
}

var $ul = $("ul");
    $listItems = $ul.find("li"),
    listItemCount = $listItems.length,
    listItemHeight = parseInt($listItems.css("height")),
    maxHeight = parseInt($ul.css("max-height")),
    numberOfRows = Math.floor(maxHeight / listItemHeight),
    numberOfColumns = Math.ceil(listItemCount / numberOfRows);

$ul.find("li:nth-child(" + numberOfColumns.toString() + "n+1)")
   .css
   ({ 
      "clear": "both", 
      "background": "red"
   });