height: fit-content设置后下拉框无法适配内部li元素的解决方法

AI 小北

2026-7-7

解决方法

问题根源在于你的下拉框父容器.dropdownCon设置了固定的height: 50px——它作为flex纵向布局容器，会强制限制内部所有子元素的总高度，导致下拉框（.dropdown）即使设置了height: fit-content也无法展开适配列表项数量。

调整方案很简单：

移除.dropdownCon的height: 50px，让父容器自动适配子元素的总高度
如果你希望保持下拉按钮的固定高度，可以给.dropdownBtn单独设置height: 50px，替代父容器的固定高度限制

修改后的完整CSS代码：

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* 修正原代码中的笔误：100%x */
  height: 90px;
  background-color: green;
}

.dropdownCon {
  display: flex;
  flex-direction: column;
  /* 移除固定height:50px */
}

.dropdownBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 19px;
  font-weight: 600;
  font-family: sans-serif;
  color: #ffffff;
  padding: 11px 23px;
  background-color: #121212;
  border-radius: 5px;
  border: 1px solid #ffffff;
  cursor: pointer;
  /* 可选：若需保持按钮固定高度，添加此行 */
  /* height: 50px; */
}

.dropdown {
  width: 100%;
  height: fit-content;
  max-height: 250px;
  overflow-y: auto;
  background-color: blue;
}

.dropdown ul {
    width: 100%;
    margin: 0;
    padding: 0;
    /* 移除height:100%，让列表自适应内容高度 */
}

.dropdown ul li {
    display: flex;
    column-gap: 10px;
    align-items: center;
    width: 100%;
    height: 30px;
    font-size: 16px;
    font-weight: 500;
    font-family: sans-serif;
    color: #ffffff;
    border-bottom: 1px solid #c1c1c1;
    cursor: pointer;
}

调整后效果：