如何根据列表中元素的数量，使用列表来增加div的大小

Question

index.html

<div class="list">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>

style.css

.list {
display: flex;
flex-direction: column;
max-height: 200px !important;
overflow: auto;
min-height : 115px;
}

在上面的代码中，ul标签中的li项目的数量可能会有所不同，所以我只想保留div的高度，这将是li标签完全显示所需的。如何根据li元素的数量和它们占据的空间动态更改高度

Answer 1

尝试将最大高度添加到正在使用的类的css中。

.list {
display: flex;
flex-direction: column;
max-height: 200px !important;
overflow: auto;
min-height : 115px;
max-height: 100%;
}

Answer 2

从.list中删除max-height，您将获得默认的CSS行为-添加的项目越多，高度就越大。一般来说，明确设置height是不必要的，有时是有害的，内容应该向下增长并垂直滚动。在某些情况下，通常在处理图像时，需要明确的高度，例如，在制作carousel时，您希望它具有特定的height，即使这样，也可能最好具有max-height(不要强制图像拉伸)。