如何为多个列表/列表项保持相同的弹性高度？答案

【问题标题】：How can I maintain equal flex height for multiple lists / list items?如何为多个列表/列表项保持相同的弹性高度？
【发布时间】：2021-02-15 02:37:01
【问题描述】：

我有 2 个动态列表，它们使用 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>

【问题讨论】：

明确一点，您是否希望 li 元素无论出现在哪个 ul 中都具有相同的高度？
您看到列表 2，第一项已拉伸到几乎填满容器的一半吗？我希望它是大小的 1/5，以及列表项的其余部分。当然，它们的高度可以改变添加的更多项目，但它们都应该是相同的高度。简而言之 - 是的。
感谢您的确认。父母ul 应该怎么办？它应该缩小到单个li的大小还是应该保持在默认高度？
它应该缩小到单个li的大小
你有什么想法@Martin 吗？我有点迷路了哈哈

标签： html css list flexbox height

【解决方案1】：

我想我可能已经解决了你的问题。首先，因为你给了那个 container 类元素 ** height: 500px;** 它会影响你的 ul, li 元素的高度。我从您的 CSS 中删除了它们，并在 list-item 类中添加了 min-height: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>

【讨论】：