Chargement...

Overflow en CSS

Vous pouvez donner une taille fixe à une boîte. Et si le contenu est plus haut ou plus large que cette boîte ? overflow décide si le surplus déborde, est coupé, ou devient défilable.

Mots-clés en un coup d’œil

📊 Valeurs overflow courantes

Valeur Sens au quotidien
visible (par défaut) Le contenu en trop peut sortir de la boîte
hidden Le surplus est coupé ; pas de barres de défilement
scroll Des barres sont affichées (souvent même si inutiles)
auto Les barres apparaissent seulement en cas de débordement

Par défaut : le contenu peut déborder

Avec overflow: visible (par défaut), un long contenu peut se peindre hors des bords de la boîte.

Overflow visible (par défaut)

css
CSS Code 
.box-visible {
width: 220px;
height: 80px;
overflow: visible;
border: 1px solid #94a3b8;
background-color: #f8fafc;
}

Couper avec hidden

overflow: hidden coupe ce qui ne rentre pas. Utile pour des bords nets — mais l’utilisateur ne peut pas faire défiler le reste.

Hidden coupe le débordement

css
CSS Code 
.box-hidden {
width: 220px;
height: 80px;
overflow: hidden;
border: 1px solid #0f766e;
background-color: #ecfdf5;
}

Toujours des barres avec scroll

overflow: scroll rend la boîte défilable et réserve souvent l’espace des barres même quand le contenu tient.

Défilement toujours

css
CSS Code 
.box-scroll {
width: 220px;
height: 80px;
overflow: scroll;
border: 1px solid #7c3aed;
background-color: #f5f3ff;
}

Auto — défiler seulement si besoin

overflow: auto est un choix calme du quotidien pour les panneaux : les barres apparaissent en cas de débordement, et restent souvent discrètes sinon.

Auto au besoin

css
CSS Code 
.box-auto {
width: 220px;
height: 80px;
overflow: auto;
border: 1px solid #b45309;
background-color: #fffbeb;
}

Contrôler un axe

Utilisez overflow-x et overflow-y quand le comportement horizontal et vertical doivent différer — par ex. défilement vertical et coupure du débordement latéral.

Défilement vertical, coupure horizontale

css
CSS Code 
.panel-axes {
width: 240px;
height: 100px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #334155;
background-color: #f1f5f9;
}

Habitude pratique de panneau

Donnez à la boîte une vraie hauteur (ou max-height), puis choisissez auto pour des zones de contenu lisibles et défilables.

Panneau de notes défilable

css
CSS Code 
.note-panel {
width: 100%;
max-height: 160px;
overflow: auto;
padding: 1rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
box-sizing: border-box;
}

À vous d’essayer

  1. Faites une boîte avec width et une courte height, puis collez plusieurs paragraphes.
  2. Alternez overflow entre visible, hidden, scroll et auto.
  3. Mettez overflow-x: hidden et overflow-y: auto sur une longue ligne de texte.
  4. Construisez .note-panel avec max-height et voyez les barres seulement au besoin.
  5. Sans limite de hauteur (ou max-height), overflow n’a souvent rien à contraindre.

Erreurs fréquentes

  • Attendre des effets d’overflow sans hauteur ou largeur contrainte
  • Mettre scroll partout alors que auto serait plus calme
  • Confondre overflow (débordement de boîte) avec text-overflow (points de suspension — outil ultérieur)
  • Couper avec hidden et oublier que l’utilisateur peut avoir besoin du reste
  • Croire qu’overflow change le calcul de box-sizing (non)

Résumé

  • Overflow contrôle débordement, coupe et défilement quand le contenu dépasse sa boîte
  • Par défaut visible ; hidden coupe ; scroll offre des barres ; auto au besoin
  • Une taille contrainte (height / max-height / width) est souvent nécessaire pour voir l’effet
  • overflow-x et overflow-y séparent les axes
  • Pour beaucoup de panneaux, overflow: auto est une habitude calme

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
7
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 1 de 1
Css Tutoriel