CSS: how to make scrollbar appear outside div's border?

Question

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:

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.

The main HTML code (with one message insise the chatbox) of thix box looks like this:

<div id="sb_body">
        <div id="sb_messages_set">
            <div class="sb_message">
                <div class="sb_message_header">
                    <div class="sb_message_author">PookyFan</div>
                    <div class="sb_message_hour">12:11</div>
                </div>
                <div class="sb_message_content">test</div>
            </div>
        </div>
<!-- Some other chatbox's elements -->
</div>

My CSS code looks like this:

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;
}

Is there any way to achieve what I want? I was looking for answer but didn't find anything that would solve my problem.

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.

Edit: important thing I forgot to mention about - 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:

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.

Solution 1

Well, if that won't work, and you're married to the design, I think you have to use a bg image. I can't find a way to style the scrollbar with CSS. I made another jsfiddle with this solution demonstrated: http://jsfiddle.net/jlmyers42/mrx46geg/

But basically, you just move some of your CSS around:

#sb_body {
  width: 272px;
  height: 300px;
  overflow: auto;
  padding: 0;
  margin: 0;
  background: url("http://arcsuviam.com/play/random/bluebg.png") no-repeat left top;
}
div#sb_messages_set {
  margin: 5px;
}
div.sb_message {
  padding: 2px 4px 5px 4px;
  border-bottom-style: dashed;
  border-width: 1px;
  border-color: black;
}

Solution 2

I'd put the whole thing in a container that has the overflow:auto style applied.

See this fiddle: http://jsfiddle.net/jlmyers42/8tptqt19/

<div id="sb_body">
  <div id="sb_container">
    <div id="sb_messages_set">
        <div class="sb_message">
            <div class="sb_message_header">
                <div class="sb_message_author">PookyFan</div>
                <div class="sb_message_hour">12:11</div>
            </div>
            <div class="sb_message_content">test</div>
        </div>
    </div>
  </div>
<!-- Some other chatbox's elements -->
</div>

CSS
div#sb_container {
  overflow: auto;  
}

Solution 3

Simple.

With your div

Put the static width like below:

#divID{
overflow: hidden;
width: calc(1024px + 0);
}

#divID:hover{
overflow-y:scroll;
}

Stumbled across it and works for me. My div is positioned absolute if that makes a difference.

The scroll bar appears outside the div when hovered on

Solution 4

so you can check out that site - it describes you the solution precisely. I created a small jsfiddle for you. Note here that the text-div inside the "li" has a width in "vw". This makes the effect of scrolling outside the content. Hope this helps!

HTML

<ul><li id="lio" class="open"><div class="text">
     Lorem..
</div></li></ul>
<button>
     Halo
</button>

CSS

.open {
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100px;
  background-color: red;
}

.text {
  padding: 15px;
  background-color: orange;
  width: 30vw;
}

ul {
  display: table;
}

JQUERY

$(document).ready(function() {

http://jsfiddle.net/fcLzqp5o/#run
    $("button").click(function() {
    $("#lio").css("overflow-y", "scroll");

});
});

View more solutions