overflow overflow padding

Question

Well I have a div where I use padding and overflow but when the overflow is activated and the scroll bar appears the text goes over the area of the padding, there is a way to make the overflow start from the initial area of the padding?

http://jsfiddle.net/thpojv5p

visualization in practice, where is written chat chat ... put the mouse and scroll down and see that the words will override the initial position of the padding http://yugioh.site/layout.html

OBS: I would like a solution other than creating a new div(in order to reduce the code)

Answer 1

I edited your fiddle but since I never touched it I don’t know if it will appear to you the change I made .

here the link

What would you do next to solve your problem :

I would put the messages in a second internal div , I gave her message id:

<div id="chat">
<div id="mensagens">

  chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>chat
  <br>
  </div>
</div>

and in css would adjust the distance with a margin , css was like this

#chat {
  height: 39vh;
  width: 27.5vw;
  display: block;
  overflow: auto;
  position: fixed;
  top: 55vh;
  left: 21vw;
  background-image: url("http://pre11.deviantart.net/b65d/th/pre/i/2005/076/5/e/frame_by_anilestock.jpg");
  background-size: 100% 100%;
  -margin:auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#mensagens
{
  margin-left:30px;
  margin-top:20px;
  width:120px;
  height:139px;
  overflow:auto;
}