我正在尝试创建一个动态添加LI项的UL。
目标是当列表为空时高度为零，然后随着项目添加到列表中扩展到一定高度，并设置max-height，以便如果列表增长超过一定高度，则所有较旧的项目将被overflow: hidden隐藏。
所以最近的项目，在列表的底部，应该总是可见的，而旧的项目被向上凸起，最终消失可见。
我可以得到大多数的方式，包装UL在一个容器DIV，为DIV设置一个固定的高度，然后将UL设置为position: absolute和容器DIV设置为position: relative。
但是如果我为容器div设置了一个固定的高度，那么当列表没有项目时，它仍然在列表的上方和下方的界面项目之间有一个很大的空白。
为了看起来不奇怪，我需要列表(和它的容器div)在列表增长时动态调整高度，然后在max-height设置中限制增长。
但是，如果我删除了容器div的固定高度，它将该div的高度设置为零像素，因为UL被设置为position: absolute，因此列表根本不显示(因为整个列表被认为在零高度的div中溢出)。
这似乎是一个相当普遍的事情，人们试图实现，但我似乎找不到任何解决方案，不涉及设置一个固定的高度。
代码示例……HTML:
<div id="above_list">This should be touching the below_list div when the list is empty</div>
<div id="list_container">
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
<li>Item 4
<li>Item 5
</ul>
</div>
<div id="below_list">This should be touching the above_list div when the list is empty, and should get farther away from the above_list div as <li> items are added to the list
CSS:
#list_container {
position: relative;
max-height: 100px;
overflow: hidden;
}
ul {
position: absolute;
bottom: 0;
}
在上面的代码示例中，即使列表有一堆列表项，容器div也以零高度显示。
我需要容器div仅在列表没有项目时显示为零高度。然后，容器div的高度应该随着项目添加到列表中而增长，并且当列表超过一定高度时应该停止增长。
列表需要位于容器div的底部，这样如果列表开始溢出超过容器div的max-height，那么它应该将较旧的列表项推到div的顶部之上，而不是隐藏在div的底部以下。(因此UL的顶部被视为溢出，而不是UL的底部被视为溢出。)
使用伸缩列，并将内容对齐到伸缩尾
不需要换行div，除非有其他原因。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
ul {
max-height: 150px;
overflow: hidden;
border: 1px solid grey;
list-style: none;
display: flex;
flex-direction: column;
justify-content: flex-end;
}<div id="above_list">This should be touching the below_list div when the list is empty</div>
<div id="list_container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
<div id="below_list">This should be touching the above_list div when the list is empty, and should get farther away from the above_list div as items are added to the list
</div>没有列表项的示例:https://codepen.io/Paulie-D/pen/vYJgPEY