title: How do I allow horizontal scrolling only for a row of images and show overflow, without horizontally scrolling the rest of the page?
body: <p>I have a page with a body that's 960px wide and I have a row of images that I want to overflow out of the right side of the page, and allow for the display of the overflowed images and horizontally scrolling. I don't want the page as a whole to horizontally scroll, just that element.</p>
  
  <p>It's relatively easy to get the horizontal scrolling to work, but I can't get the overflow images to show without also increasing the width of the entire page (and, hence, making the page horizontally scroll).</p>
  
  <p>My CSS:</p>
  
  <pre><code>container{
    width:960px;
    margin: 0 auto;
    }
  
  .pic-container {
    white-space:nowrap; 
    overflow:scroll;
    }
  </code></pre>
  
  <p>My (simplified) HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;container&gt;
    &lt;div class="pic-container"&gt;
      &lt;div class="pic-row"&gt;
        &lt;img src="1.jpg"&gt;
        &lt;img src="2.jpg"&gt;
        &lt;img src="3.jpg"&gt;
        &lt;img src="4.jpg"&gt;
        &lt;img src="5.jpg"&gt;
        &lt;img src="6.jpg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/container&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here's a little diagram of what I'm looking for:</p>
  
  <p><img src="https://i.stack.imgur.com/ypzLQ.jpg" alt="enter image description here"></p>