html - 导致滚动条的绝对位置元素

Question

我创建了一个自动完成下拉框，当用户在输入框中输入一些数据时，它会在输入框的末尾添加一个绝对定位的表格。但问题是我有滚动条出现在右边

我想通过将表格的位置更改为相对位置，使它看起来像这样，没有滚动条。但是正如您所看到的，它增加了外部表的高度，并且将 z-index 添加到相对定位的元素显然没有任何作用。我认为坚持绝对位置更好，因为我认为没有办法在不使用相对定位扩展表格的情况下扩展下拉框。

我的 HTML 设置如下：

<div class="autocomplete">
   <input name="partNumber[]" class="partNumberInput parts form-control fireChange" type="text" aria-describedby="enter Part Number" placeholder="Part Number" >
    <table id="autocomplete-list" class="autocomplete-items table table-dark  table-bordered table-sm dropDownTable">
   <thead>
       ....

该表是绝对定位的，而 2 个外部 div 是相对定位的。