title: Horizontal scroll and cut div
body: <p>I have a top bar to put in my blog :</p>
  
  <pre><code>&lt;nav class="top-bar blog"&gt;
      STACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOWSTACKOVERFLOW
  &lt;/nav&gt;
  
  &lt;style type="text/css"&gt;
      .top-bar.blog {
          width: 100%;
          white-space: no-wrap;
          background: violet;
          ...
      }
      body {
          background: black;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>When I resize my browser window to a small size to see the horizontal bar I get this:</p>
  
  <p><img src="https://i.stack.imgur.com/FCUqE.jpg" alt="enter image description here"></p>
  
  <p>Which is the expected result.</p>
  
  <p>When I scroll horizontally to the right here is the result:</p>
  
  <p><img src="https://i.stack.imgur.com/ChiGb.jpg" alt="enter image description here"></p>
  
  <p>The div is cut.</p>
  
  <p>Strangely, there is the same problem on stackoverflow.com's top-bar.</p>
  
  <p>How can I prevent this so the size can stay adjusted to the right part of the windows instead of being "cut"?</p>
  
  <p><img src="https://i.stack.imgur.com/oVUZ8.jpg" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/RjU3w.jpg" alt="enter image description here"></p>