html - 绝对子级与列容器宽度相同

Question

我正在创建自己的下拉搜索栏，当用户键入一些文本时它会显示结果。

问题是结果列表 div 必须是 position: absolute。这导致它忽略父 col 容器宽度。如何让结果列表适合列的宽度？

.player-search-list {
  z-index: 2;
  background-color: white;
  position: absolute;
  width: 100%;
}

<div class="row">
  <div class="col-6">
    <!-- some other content -->
  </div>
  <div class="col-6">
    <div class="top-buffer">
      <!-- Relative search bar that expands to bootstrap col -->
      <div class="player-search-bar input-group rounded-bottom-0">
        <!-- search functionality-->
      </div>
    </div>

    <!-- ***ABSOLUTE drop down*** that doesnt fit inside bootstrap col -->
    <div class="list-group player-search-list" id="playerSearch">
      <div *ngFor="let result of results | slice:0:9">
        <!-- drop down results list functionality -->
      </div>
    </div>
  </div>
</div>

Answer 1

如果有人偶然发现这个问题并且仍在寻找结果:

您的父 DIV(在本例中为 .col-6)必须是 position:relative。搜索结果的宽度必须设置为100%!

parent_container {
  position: relative;
}

search_results {
  position: absolute;
  width: 100%
}