Tengo un chat web y las burbujas de conversación tienen un ancho fijo. ¿Cómo puedo hacer para que el ancho se variable en función del contenido que se va colocando?

Dejo el fragmento del `css`. 

    .chat-bubble {
        border-radius: 7px;
        box-shadow: 0 2px 2px rgba(126,156,163,0.55);
        padding: 5px 7px;
        width: 300px;
        max-width: 100%;
        position: relative;
    }