Pentru a preveni „ieșirea” textului din container, trebuie să forțezi
ruperea cuvintelor (sau a șirurilor lungi fără spații) și să permiți textului să se împartă
pe mai multe linii. Cel mai simplu mod este să folosești proprietățile CSS care gestionează
împachetarea textului, de exemplu:
Nu uita, pentru ca aceste reguli să funcționeze, containerul părinte
(.message, .message-content, etc.) trebuie să aibă o lățime fixată sau un max-width (cum ai
deja max-width: 80% pentru .user-message).
Utilizarea lui #dialog-window::-webkit-scrollbar:hover { ... } nu va
avea efectul dorit în majoritatea browserelor. Pseudoclasa :hover pe pseudo-elementul
::-webkit-scrollbar nu este recunoscută așa cum te-ai aștepta.
Dacă vrei ca scrollbar-ul să se afișeze numai atunci când mouse-ul este peste container
(adică peste div-ul cu id-ul dialog-window), poți folosi următoarea abordare
Nu uita, pentru ca aceste reguli să funcționeze, containerul părinte
(.message, .message-content, etc.) trebuie să aibă o lățime fixată sau un max-width (cum ai
deja max-width: 80% pentru .user-message).