html - 背景颜色不填充水平滚动下拉项

Question

我正在为一个元素开发 UI。我正在使用 Bootstrap 来创建 UI。

我有一个下拉列表，其中包含以前搜索的历史记录。由于这些搜索可能很长，下拉菜单可能会变得足够长，以至于被页面边缘截断。为了解决这个问题，我将最大宽度设置为页面宽度的百分比，然后让用户在溢出时水平滚动。这很好用，但有一个错误，即背景颜色不会水平拉伸(stretch)以填充长元素。

我已经搜索过这个问题，在我的案例中似乎存在一个一致的问题。这个 UI 很容易调整大小，范围从 150 像素宽度一直到完整的浏览器，因此页面和下拉菜单的大小都不会是静态的。

我把相关的页面和代码提取出来放到了bootply中。我还将我认为相关的 css 放在 css 文件的顶部。有问题的下拉菜单是带有时钟图标的下拉菜单。单击它，下拉菜单为深色。滚动，最长的元素将失去其背景颜色。我希望整个下拉元素具有相同的 bg 颜色。

请注意，此元素的最终宽度比我必须将下拉列表限制到的宽度大得多，而我不知道这个最终宽度。

这是 Bootstrap :https://www.bootply.com/2J0SOnElvM

谢谢

Answer 1

CSS

.dropdown-menu {
  max-height: 12.5em; /* 5 elements with 2.5em height */
  overflow-y: auto;
  margin: 0;
  padding: 0;

  background-color: green; /* Your Background Color */

}