I have made a messaging web app a while back and this summer i tried to make another with a bit of a different structure but ran into this issue where the spans’ (messages’) height shrunk instead of overflowing with scroll, and if i set a min-height they wouldn’t get taller when the message was longer, so i used the source code of the old one and changed it a bit, but had the same issue. I would really like to know why this is happening and how to solve it.
I put the code on github, to be easier to see/try: https://github.com/Konstei/stack-overflow-code/.
I also made it into a running website using github’s pages: https://konstei.github.io/stack-overflow-code/new/, https://konstei.github.io/stack-overflow-code/old/
>Solution :
I have referred your code and the issue is you have set overflow: hidden on *{} global selector. Since your direct span element after message-area div hasn’t specified any overflow property, the overflow property from your global selector gets applied whose value is hidden and hence the overflowing content from inner span is being hidden. Just remove that property from your global selector and it should work.