overflow-x: auto and line background color visibility on scroll

I have the following HTML and CSS defined to have the horizontal scroll when I have overflow and at the same time, apply the background color for each line:

CSS:

ul.list {
  list-style-type: none;
  margin-top: 10px;
  padding: 0;
  text-align: left;
  overflow-x: auto;
}

ul.list li {
  margin: 0;
  padding: 0 10px;
    background-color: red;
}

.content-holder {
      font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace;
  font-size: 12px;
  color: #333;
  white-space: pre;
  overflow: visible;
  -ms-word-wrap: normal;
  word-wrap: normal;
}

HTML:

<ul class="list">
    <li>
        <span class="content-holder">foo</span></li>
    <li>
        <span class="content-holder">foo foo foo foo foo foo</span></li>
    <li>
        <span class="content-holder">bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar</span>
    </li>
</ul>

However, I am not seeing background color for each line applied when I scroll to right:

What am I missing here? Here is the jsfiddle: http://ift.tt/1RkaqnM