Adjust DIV size to content

Question

I’m working on a chat for a site, the chat is Ok, but as always catch to configure the CSS.

I want to adjust the DIV to the content size and put, only the DIV occupies 100% of the width.

.div-chat-i {
color:#000000;
background-color:#C6E2FF;
padding:5px 12px;
border-radius:10px;
border:1px solid #ddd;
width: auto; }  

Answer 1

div is a block type element, and by default occupies 100% of the width of the screen, or of the element you are inside.

See in the example below that I put it with 15% of the width of the parent, which in the case is the body, which by default is 100% of the width of the screen...

EDIT: In the example I did, let the div, with a minimum width of 15% and a maximum of 25%, so if the content is small it takes at least 15%, and if the form is greater than 25% the line will break.

NOTE: I used position:absolut to position the chat in the lower right corner

.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>