How to prevent flex object from overflowing it's container?

Question

I tried the solutions already available on StackOverflow, but nothing works for my code. For information, I am using TailwindCSS.

I am working on a little app with a messaging system. In a column, I put all the contacts and their last message. I want to hide the rest of the message that doesn't fit in the container.

Here is my code, can you help me figure out why it keeps overflowing?

<div class="w-1/3">
    <div class="flex flex-row mt-2 cursor-pointer hover:bg-gray-300 p-2 rounded-lg w-full">
        <img src="/static/media/man.9a8e0424.jpg" class="object-cover h-16 w-16 rounded-full">
            <div class="flex flex-col justify-center ml-2 w-full">
                <p class="font-bold">Mark Dupuis</p>
                <p class="text-sm text-gray-600 whitespace-no-wrap overflow-hidden">Merci d'avoir pris le temps d'en parler avec moi, je l\'apprécie</p>
            </div>
        </div>
    </div>

Here is a screenshot of what is wrong:

Answer 1

Use below code in style

 white-space: nowrap; 
 width: 100%; 
 overflow: hidden;
 text-overflow: ellipsis;