Why is there no overflow scrollbar showing on my messaging UI?

I am building my little Messaging UI and I seem to have a problem.

I have my container which has an undertermined height, but has 80px and 60px at the top and the bottom. So, to get the middle section height, I do calc(100% - 140px). This is the right size. However, my content overflows at the top and no scrollbar seems to appear. I don't get why this is happening and I don't know how I could fix this.

Do you have any idea?

<div class="tw-w-full tw-h-full tw-flex tw-flex-col" style="">     <div class="tw-flex tw-flex-row tw-justify-between tw-items-center tw-px-4" style="height: 80px; background-color: rgba(67, 67, 73, 0.8); color: white;">        <div class="tw-flex tw-flex-row">           <div class="tw-rounded-full" style="height: 60px; width: 60px;"><img class="tw-h-full tw-w-full" src=""></div>           <div class="tw-flex tw-flex-col tw-justify-center tw-ml-2"><span class="tw-underline hover:tw-no-underline tw-cursor-pointer">assad</span><span class="tw-text-xs">Employeur</span></div>        </div>     </div>     <div class="tw-flex tw-flex-col tw-space-y-2 tw-justify-end p-3 tw-flex-1" style="height: calc(100% - 140px);overflow-y: scroll;">        <p class="p-2 px-3 tw-rounded-2xl mr-auto tw-bg-aa-yellow" style="max-width: 70%;">teste teste</p>        <p class="p-2 px-3 tw-rounded-2xl ml-auto tw-bg-gray-300" style="max-width: 70%;">asdasd</p>        <p class="p-2 px-3 tw-rounded-2xl ml-auto tw-bg-gray-300" style="max-width: 70%;">tessad</p>        <p class="p-2 px-3 tw-rounded-2xl ml-auto tw-bg-gray-300" style="max-width: 70%;">blablablae</p>        <p class="p-2 px-3 tw-rounded-2xl ml-auto tw-bg-gray-300" style="max-width: 70%;">Ceci est une question simple!</p>        <p class="p-2 px-3 tw-rounded-2xl ml-auto tw-bg-gray-300" style="max-width: 70%;">Bonjour</p>        <p class="p-2 px-3 tw-rounded-2xl ml-auto tw-bg-gray-300" style="max-width: 70%;">asdsd</p>        <p class="p-2 px-3 tw-rounded-2xl ml-auto tw-bg-gray-300" style="max-width: 70%;">asdasdsa</p>        <p class="p-2 px-3 tw-rounded-2xl ml-auto tw-bg-gray-300" style="max-width: 70%;">gg!</p>        <p class="p-2 px-3 tw-rounded-2xl ml-auto tw-bg-gray-300" style="max-width: 70%;">asdasd</p>        <p class="p-2 px-3 tw-rounded-2xl ml-auto tw-bg-gray-300" style="max-width: 70%;">asdasdasdasd</p>        <p class="p-2 px-3 tw-rounded-2xl ml-auto tw-bg-gray-300" style="max-width: 70%;">asdasdsadasd</p>        <p class="p-2 px-3 tw-rounded-2xl ml-auto tw-bg-gray-300" style="max-width: 70%;">asdasdsadasdasdasdasdasdasd</p>        <p class="p-2 px-3 tw-rounded-2xl mr-auto tw-bg-aa-yellow" style="max-width: 70%;">asdasdsad</p>     </div>     <div style="min-height: 60px; background-color: rgba(67, 67, 73, 0.8);"><input type="text" value=""><input type="submit"></div>  </div>  

Those are Tailwind classes, they are a single use type of class. (tw-flex is ONLY display:flex, etc.) You can understand them pretty easily by only the title.

from Recent Questions - Stack Overflow https://stackoverflow.com/questions/65376934/why-is-there-no-overflow-scrollbar-showing-on-my-messaging-ui NicolasSC