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

Question

我正在为一个项目制作 UI。我正在使用引导程序来创建 UI。

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

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

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

请注意，此元素的最终宽度远大于我必须将下拉菜单限制为的宽度，并且我不知道这个最终宽度。

这里是引导：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 */

}