Div Horizo​​ntal Scrollbar - 悬停时，子div背景没有达到全宽

Question

我正在尝试使用带有水平滚动条的div创建项目列表。

我还需要在列表的每个项目上应用背景颜色的悬停效果。

每个项目在悬停时必须占据每条线的100％。

我的容器应该有绝对位置，我无法修改它。

当我有一个没有滚动条的小列表时，我的CSS运行良好。但是，当我有一个长项时，悬停效果不会应用溢出的文本背景。它仅适用于从容器继承的前400px。

遵循代码：

HTML

<div class='container'>
  <div class='wrapper'>
    <div class='item'> LONG ITEM LONG ITEM LONG ITEM LONG ITEM LONG ITEM LONG ITEM LONG ITEM LONG ITEM LONG ITEM LONG ITEM LONG ITEM </div>
    <div class='item'>LONG ITEM LONG ITEM LONG ITEM LONG ITEM LONG ITEM LONG ITEM LONG ITEM LONG ITEM </div>
 </div>
<div>

CSS

.container{
  position: absolute;
  max-width: 400px; 
  background: gray; 
}
.wrapper{
  width: 100%; 
  overflow: auto;
}
.item {
  width: 100%;
  white-space: nowrap;
  padding: 5px;
  height: 20px;
}
.item:hover{
  background: #4178be;
  color: #ffffff;
}

样本： https://jsfiddle.net/gj5uwz30/4/

有没有人知道我该如何解决这个问题？ 谢谢，

Answer 1

将.item设为inline-block并将width: 100%;替换为min-width: 100%;

 .item {
      display: inline-block;
      min-width: 100%;
      white-space: nowrap;
      padding: 5px;
      height: 20px;
    }

这里是小提琴：https://jsfiddle.net/o87xp5jd/1/

此外：

评论后的第二个解决方案：https://jsfiddle.net/o87xp5jd/2/

此解决方案使.wrapper成为项目的全宽，并在.container

内滚动

Answer 2

你这样做的方法是错误的，你应该制作一个带有显示表，max-width 400px和overflow auto的容器。 然后添加宽度为％和显示块的项目，它将正确工作