如何为多个列表/列表项保持相等的弹性高度

Question

我有两个动态列表，它们是兄弟列表，一个使用flex列布局，位于另一个之上。我的困境是，我似乎无法让列表/列表项目保持相等的弹性高度，因为项目较少的列表似乎总是会拉伸其项目的高度。

请参阅下面的代码。注意；项目1、列表2"；拉伸了吗？我希望两个列表的所有列表项都一致，并且具有相等的高度来填充主父容器。具有单个li项目的ul应调整为单个li项目的高度。

.container {
display: flex;
flex-direction: column;
height: 500px;
border: 1px solid black;
}
.list {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
flex: 1 0 auto;
border: 1px solid black;
}
.list-item {
flex: 1 0 auto;
border: 1px solid black;
}

<div class="container">
<ul class="list">
<li class="list-item">item 1, list 1</li>
<li class="list-item">item 2, list 1</li>
<li class="list-item">item 3, list 1</li>
<li class="list-item">item 4, list 1</li>
</ul>
<ul class="list">
<li class="list-item">item 1, list 2</li>
</ul>
</div>

Answer 1

我想我可能已经解决了你的问题。首先，因为您给了容器类元素**height:500px；**它会影响你的ul，li元素的高度。我从你的CSS中删除了它们，并在列表项类中添加了最小高度：100px，但您可以根据需要更改li元素的高度。

.container {
display: flex;
flex-direction: column;
width:100%;
flex:0 0 100%;
border: 1px solid black;
}
.list {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
flex: 1 0 auto;
border: 1px solid black;
}
.list-item {
min-height:100px;
border: 1px solid black;
}

<div class="container">
<ul class="list">
<li class="list-item">item 1, list 1</li>
<li class="list-item">item 2, list 1</li>
<li class="list-item">item 3, list 1</li>
<li class="list-item">item 4, list 1</li>
</ul>
<ul class="list">
<li class="list-item">item 1, list 2</li>
</ul>
</div>