A div é um elemento do tipo bloco, e por default ocupa 100% da largura da tela, ou do elemento do qual estiver dentro.
Veja no exemplo abaixo que eu coloquei ela com 15% da largura do pai, que no caso é o body, que por default tem 100% da largura da tela...
EDIT: No exemplo que fiz, deixe a div, com largura mínima de 15% e máxima de 25%, então se o conteúdo for pequeno ocupa no mínimo 15%, e se form maior que 25% a linha vai quebrar.
OBS: usei position:absolut
para posicionar o chat no canto inferior direito
.div-chat-i {
color:#000000;
background-color:#C6E2FF;
padding:5px 12px;
border-radius:10px;
border:1px solid #ddd;
/* estilo de posicionamento e largura*/
min-width: 15%;
max-width: 25%;
position: absolute;
bottom: 10px;
right: 10px;
left: auto;
}
<div class="div-chat-i">
<p>Lorem, ipsum dolor.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam asperiores ratione adipisci dolorem animi ut.</p>
</div>