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

Question

我正在为一个项目的UI工作。我使用引导来创建UI。

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

我已经搜索了这个问题，在我的情况下似乎有一个一致的问题。这个用户界面很容易调整大小，范围从150像素到一个完整的浏览器，因此页面大小和下拉大小都不会是静态的。

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

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

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

}