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

Question

我正在为项目制作UI。我正在使用bootstrap来创建UI。

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

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

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

请注意，此元素的最终宽度远大于我必须限制下拉列表的宽度，我不知道这个最终宽度。

这是bootply：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 */

}