how to make the div that this width auto does not catch 100% of the parent div

Question

I’m doing a mini chat, I’m having trouble when styling user conversations, my goal is to make the div that will show the conversations does not get larger than your content, ie if the user only typed a word, it gets the size of that word, I’m having trouble with that, I have the div father whose name is box_mensagem and within that div have the li that will hold users' conversations, and within those li have the div box_msg that takes 100% of div which is the box_mensagemand within that box_msg finally got the div that holds all my conversation is the div segura_msg by default she has a float: left; and to identify when I send the message I added the class eu with a float: right;, and that div has a width: 400px; that limits its size, and within it I have the div that shows the photo and the user’s message with the width: auto;, only I’m having trouble with that, my message was to stay on the right, and the picture out of that div with width: auto; but when I give a negative margin in the photo, she ends up disappearing from div, what I’m doing wrong ? http://prntscr.com/j5dvm8

<style type="text/css">
.align_left {
    float: left;
}
.box_mensagem {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.box_mensagem::-webkit-scrollbar {
    width: 0px;
}
.box_mensagem ul li .box_msg {
    margin: 0 0 0.5em 0;
    width: 570px;   
    height: 120px;
    background-color: purple;
}
.box_mensagem ul li:last-child .box_msg {
    margin: 0;
}
#chat #left #mensagem .box_mensagem ul li .box_msg .segura_msg {
    float: left;
    width: 400px;
    height: 100%;
    background-color: pink;
}
.box_mensagem ul li .box_msg .eu,
.box_mensagem ul li .box_msg .segura_msg .m_msg {
    float: right;
}
.box_mensagem ul li .box_msg .segura_msg .mostra_msg {
    float:  left;
    width: auto;
    height: auto;
    background-color: #ccc;
}
.box_mensagem ul li .box_msg .segura_msg img {
    float: left;
    width: 55px;
    height: 55px;
}
</style>

<div class="box_mensagem align_left">
                <ul>
                    <li><div class="box_msg">
                        <div class="segura_msg">
                            <div class="mostra_msg">
                                <img src="fotos/1.jpg" border="0">
                                aqui vem a primeira conversa do chat
                            </div>
                        </div>
                    </div></li>
                    <li><div class="box_msg">
                        <div class="segura_msg eu">
                            <div class="mostra_msg m_msg">
                                <img src="fotos/2.jpg" border="0">
                                aqui vem o usuário 02 
                            </div>
                        </div>
                    </div></li>
                </ul>
            </div>

Answer 1

I suggest you change some CSS codes, such as creating another class for incoming messages. Your messages have classes .eu and .m_msg, so you can create two other classes .ele and .e_msg. This way it is much easier to stylize each thing independently, how to assign a float different, a different margin and position the image of each div.

The image you can position absolutely (position: absolute) since her position will always be the same.

See how it would look in the way mentioned:

.align_left {
    float: left;
}
.box_mensagem {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.box_mensagem::-webkit-scrollbar {
    width: 0px;
}
.box_mensagem ul li .box_msg {
    margin: 0 0 0.5em 0;
    width: 570px;   
    height: 120px;
    background-color: purple;
}
.box_mensagem ul li:last-child .box_msg {
    margin: 0;
}
.box_mensagem ul li .box_msg .segura_msg {
    float: left;
    width: 400px;
    height: 100%;
    background-color: pink;
}

.box_mensagem ul li .box_msg .eu
{
    float: right;
    text-align: right;
}

.mostra_msg {
    float:  left;
    width: auto;
    height: auto;
    background-color: #ccc;
    position: relative;
}

.mostra_msg img {
    width: 55px;
    height: 55px;
    position: absolute;
    top: 0;
}

div.m_msg{
    margin-right: 55px;
    float: right;
}

div.e_msg{
    margin-left: 55px;
}

.eu .mostra_msg img{
   right: -55px;
}

.ele .mostra_msg img{
   left: -55px;
}

<div class="box_mensagem align_left">
    <ul>
        <li><div class="box_msg">
            <div class="segura_msg ele">
                <div class="mostra_msg e_msg">
                    <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" border="0">
                    aqui vem a primeira conversa do chat aqui vem a primeira conversa do chat aqui vem a primeira conversa do chat aqui vem a primeira conversa do chat
                </div>
            </div>
        </div></li>
        <li><div class="box_msg">
            <div class="segura_msg eu">
                <div class="mostra_msg m_msg">
                    <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" border="0">
                    aqui vem a primeira conversa do chat aqui vem a primeira conversa
                </div>
            </div>
        </div></li>
    </ul>
</div>