title: CSS: how to make scrollbar appear outside div's border?
body: <p>I'm creating some kind of chat box for my website and I can't make vertical scrollbar to appear outside the border.
  This is what I'm getting:</p>
  
  <p><img src="https://i.stack.imgur.com/u4UjI.jpg" alt="My chatbox"></p>
  
  <p>All I want is that scrollbar to appear outside the border, on the right. It's not really pretty as it is now, is it.</p>
  
  <p>The main HTML code (with one message insise the chatbox) of thix box looks like this:</p>
  
  <pre><code>&lt;div id="sb_body"&gt;
          &lt;div id="sb_messages_set"&gt;
              &lt;div class="sb_message"&gt;
                  &lt;div class="sb_message_header"&gt;
                      &lt;div class="sb_message_author"&gt;PookyFan&lt;/div&gt;
                      &lt;div class="sb_message_hour"&gt;12:11&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="sb_message_content"&gt;test&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;!-- Some other chatbox's elements --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS code looks like this:</p>
  
  <pre><code>div#sb_messages_set
  {
  border: 2px solid black;
  border-radius: 10px;
  background-color: #0080E0;
  overflow: auto;
  height: 300px;
  }
  div.sb_message
  {
  margin: 2px 4px 5px 4px;
  border-bottom-style: dashed;
  border-width: 1px;
  border-color: black;
  }
  div.sb_message_header
  {
  clear: both;
  display: block;
  margin-bottom: 3px;
  }
  div.sb_message_author
  {
  display: inline;
  text-align: left;
  font-weight: bold;
  }
  div.sb_message_hour
  {
  display: inline;
  float: right;
  }
  div.sb_message_content
  {
  clear: both;
  text-align: left;
  padding-bottom: 5px;
  }
  </code></pre>
  
  <p>Is there any way to achieve what I want? I was looking for answer but didn't find anything that would solve my problem.</p>
  
  <p>Oh, and if there's anything wrong with my code but it's not connected with my issue, please share your thoughts, I started having fun with creating websites pretty recently so it's possible that I make some newbie mistakes here and am not really aware of it.</p>
  
  <p><strong>Edit: important thing I forgot to mention about</strong> - I want the border to be fully visible all the time, I mean - I want just the messages to be scrolled, but wihout making the border be scrolled with it.
  In other words, I don't want anything like that:</p>
  
  <p><img src="https://i.stack.imgur.com/Jhf2q.jpg" alt="Do not want"></p>
  
  <p>In this picture the chatbox has been scrolled a little and the top and bottom frame isn't visible. But I want the entire frame to be visible despite div's content being scrolled.</p>