Τι κάνει η ιδιότητα overflow στο CSS και σε ποιες περιπτώσεις πρέπει να χρησιμοποιείται;

Η ιδιότητα overflow στο CSS καθορίζει πώς να χειρίζεστε το περιεχόμενο που ξεπερνά τα όρια ενός στοιχείου.

• visible: Το περιεχόμενο εμφανίζεται πλήρως, ακόμα και αν ξεπερνά το πλαίσιο.
• hidden: Το περιεχόμενο που ξεπερνά το πλαίσιο κόβεται και δεν είναι ορατό.
• scroll: Πάντα εμφανίζονται οι γραμμές κύλισης (οριζόντια και κάθετη), ακόμα και αν το περιεχόμενο δεν ξεπερνά.
• auto: Οι γραμμές κύλισης εμφανίζονται μόνο αν χρειάζεται (όταν το περιεχόμενο ξεπερνά).

Χρησιμοποιείται:

• Όταν το περιεχόμενο του στοιχείου (π.χ. κείμενο ή εικόνα) μπορεί να είναι μεγαλύτερο από τις καθορισμένες διαστάσεις και χρειάζεται διαχείριση της εμφάνισής του.
• Για τη δημιουργία περιοχών κύλισης μέσα στη σελίδα, π.χ. για λίστες, μπλοκ κώδικα ή πίνακες.
• Για το κόψιμο ανεπιθύμητου περιεχομένου που ξεπερνά το στοιχείο, διατηρώντας το αρχικό στυλ.

Παράδειγμα χρήσης του overflow: auto; για ένα μπλοκ με περιορισμένο ύψος:

.scrollable-block {
  height: 200px; /* Περιορισμός ύψους του μπλοκ */
  overflow: auto; /* Προσθήκη γραμμών κύλισης αν το περιεχόμενο είναι μεγαλύτερο */
  border: 1px solid #ccc; /* Προσθήκη περιγράμματος για ορατότητα */
  padding: 10px; /* Εσωτερικό περιθώριο */
}