title: overflow-x: auto and line background color visibility on scroll
body: <p>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:</p>
  
  <p>CSS:</p>
  
  <pre><code>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;
  }
  
  .highlight {
      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;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="list"&gt;
      &lt;li&gt;
          &lt;span class="content-holder"&gt;foo&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;
          &lt;span class="content-holder"&gt;foo foo foo foo foo foo&lt;/span&gt;&lt;/li&gt;
      &lt;li class="highlight"&gt;
          &lt;span class="content-holder"&gt;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&lt;/span&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>However, I am not seeing background color for each line applied when I scroll to right:</p>
  
  <p><img src="https://i.imgur.com/uKAfKpi.png" alt=""></p>
  
  <p>What I am after is to apply the background color for the lines which has <code>.highlight</code> CSS class applied and the background needs to be for the the whole line (including the hidden part which gets visible during the scroll). At the same time, I don't want to apply the scroll bar to each line (like here: <a href="http://jsfiddle.net/sLbgmq8s/9/" rel="nofollow noreferrer">http://jsfiddle.net/sLbgmq8s/9/</a>).</p>
  
  <p>What am I missing here? Here is the jsfiddle: <a href="https://jsfiddle.net/sLbgmq8s/4/" rel="nofollow noreferrer">https://jsfiddle.net/sLbgmq8s/4/</a></p>