如何让flex布局的ul元素在指定高度内垂直滚动且不影响li元素

问题说明 #

使用Bootstrap 5.3开发移动端专属实时搜索栏，需要让.search-results容器在指定高度内垂直滚动，且不破坏内部列表项的布局。

现有代码 #

CSS 代码 #

.search-results {
  z-index: 9999;
  width: 80vw;
  position: absolute;
  top: 80%;
  left: 10%;
}

.search-results li {
  width: 100%;
  overflow: hidden;
}

.link-p-colr {
  color: #333;
  text-decoration: none;
  padding-bottom: 1rem;
}

.live-outer {
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #ccc;
  background: #fff;
  padding-bottom: 1rem;
}

.live-im img {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}

.live-product-det {
  flex-grow: 1;
  height: 60px;
  overflow: hidden;
}

.live-product-name p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

HTML 代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<form class="py-3 d-flex justify-content-end d-md-none custom-form position-relative" style="background-color:#FFDB58;" method="get" autocomplete="off" id="search2">
  <input class="form-control w-50 ms-auto" name="search" type="search" placeholder="Search" aria-label="Search" id="mu">
  <ul class="search-results list-group list-unstyled bg-white" id="livesearch2">
    <li class="p-3 d-inline">
      <a class="link-p-colr" href="http://gadgets92.test/mobiles/product.php?id=2">
        <div class="live-outer">
          <div class="live-im">
            <img style="width: fit-content; height: 60px;" src="http://gadgets92.test/admin/images/products/s7 edge.jpeg">
          </div>
          <div class="live-product-det ps-3">
            <div class="live-product-name">
              <p>Samsung Galaxy S7 Edge (4GB RAM +32)</p>
            </div>
            <div class="live-product-price">
              <div class="live-product-price-text">
                <p>Rs.50,999</p>
              </div>
            </div>
          </div>
        </div>
      </a>
    </li>

    <li class="p-3 d-inline">
      <a class="link-p-colr" href="http://gadgets92.test/watches/product.php?id=5">
        <div class="live-outer">
          <div class="live-im">
            <img style="width: fit-content; height: 60px;" src="http://gadgets92.test/admin/images/products/samsung-watch-4.png">
          </div>
          <div class="live-product-det ps-3">
            <div class="live-product-name">
              <p>Samsung Watch 4 Smartwatch</p>
            </div>
            <div class="live-product-price">
              <div class="live-product-price-text">
                <p>Rs.36,499</p>
              </div>
            </div>
          </div>
        </div>
      </a>
    </li>

    <li class="p-3 d-inline">
      <a class="link-p-colr" href="http://gadgets92.test/televisions/product.php?id=15">
        <div class="live-outer">
          <div class="live-im">
            <img style="width: fit-content; height: 60px;" src="http://gadgets92.test/admin/images/products/samsung-ua85cu8000kxxl.webp">
          </div>
          <div class="live-product-det ps-3">
            <div class="live-product-name">
              <p>Samsung UA85CU8000KXXL 85 inches 4K Smart TV</p>
            </div>
            <div class="live-product-price">
              <div class="live-product-price-text">
                <p>Rs.8,46,999</p>
              </div>
            </div>
          </div>
        </div>
      </a>
    </li>
  </ul>
  <button class="btn btn-success custom-btn me-auto" type="submit">Search</button>
</form>

已尝试的方案 #

添加以下CSS代码，但未解决问题：

<style>
    .search-results {
        max-height: 500px;
        overflow: hidden;
        overflow-y: scroll;
        padding: 0;
    }

    .search-results li {
        padding: 5px 10px;
    }
</style>

有效解决方法 #

问题根源在于Bootstrap默认样式冲突、列表项的d-inline布局导致高度计算异常，以及内部元素的固定高度和padding设置不合理。以下是修正后的完整CSS：

/* 修正搜索结果容器样式 */
.search-results {
  z-index: 9999;
  width: 80vw;
  position: absolute;
  top: 80%;
  left: 10%;
  max-height: 400px; /* 适配移动端的合理高度 */
  overflow-y: auto; /* 有内容时显示滚动条，无内容时隐藏 */
  padding: 0;
  margin: 0;
  /* 覆盖Bootstrap list-group的默认样式 */
  border: none;
  border-radius: 0;
}

/* 修正列表项布局 */
.search-results li {
  width: 100%;
  overflow: hidden;
  padding: 0;
  display: block; /* 替换d-inline，确保每项独占一行 */
}

.link-p-colr {
  color: #333;
  text-decoration: none;
  display: block; /* 让链接占满列表项空间 */
}

.live-outer {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 60px; /* 用最小高度替代固定高度，避免内容溢出 */
  border-bottom: 1px solid #ccc;
  background: #fff;
  padding: 0.5rem 1rem; /* 调整内边距，优化内容间距 */
}

.live-im img {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  object-fit: cover; /* 保证图片比例正确，不拉伸变形 */
}

.live-product-det {
  flex-grow: 1;
  min-height: 60px;
  overflow: hidden;
  padding-left: 1rem;
}

.live-product-name p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem; /* 缩小标题与价格的间距 */
}

.live-product-price-text p {
  margin: 0;
  font-weight: 500; /* 价格加粗，提升可读性 */
}

关键修正点 #

1. 容器样式：移除Bootstrap list-group的默认边框、圆角，添加margin:0覆盖ul的默认外边距，确保滚动区域计算准确。
2. 列表项布局：将d-inline改为display:block，避免inline元素导致的高度异常和布局错乱。
3. 内部元素调整：用min-height替代固定height，防止内容溢出；调整padding和margin优化间距；给图片添加object-fit:cover保证显示效果。

内容的提问来源于stack exchange，提问作者Maaz Tajammul