3.4. Overflow – Control del Desbordament

Quan el contingut d’una caixa és massa gran per a cabre dins de les seues dimensions (width / height), diem que es produeix desbordament (overflow).

La propietat overflow controla què ha de fer el navegador quan això passa.

---

Valors principals de overflow

Valor	Comportament	Descripció
visible (per defecte)	Es veu el contingut que ix de la caixa	No es retalla res. Pot trencar el disseny.
hidden	El contingut que sobra es retalla	No es mostren barres de desplaçament.
scroll	Sempre apareixen barres de desplaçament	Encara que no facen falta.
auto	El navegador mostra scroll només si cal	És l’opció més utilitzada.

---

Exemple de desbordament

.caixa {
    width: 200px;
    height: 100px;
    border: 2px solid black;
    overflow: auto;
}

<div class="caixa">
    Este text és molt llarg i no cap dins de la caixa, per tant apareixerà una
    barra de desplaçament només quan siga necessari.
</div>

---

Exemples desbordament (overflow)

Enllaç exemple

---

1. overflow: visible;

El contingut ix lliurement:

.caixa {
    width: 200px;
    height: 100px;
    border: 2px solid red;
    overflow: visible;
}

2. overflow: hidden;

El contingut extra desapareix:

.caixa {
    width: 200px;
    height: 100px;
    border: 2px solid blue;
    overflow: hidden;
}

3. overflow: scroll;

Barres d’scroll sempre visibles:

.caixa {
    width: 200px;
    height: 100px;
    border: 2px solid green;
    overflow: scroll;
}

4. overflow: auto;

Només mostra scroll quan cal:

.caixa {
    width: 200px;
    height: 100px;
    border: 2px solid orange;
    overflow: auto;
}

---

Overflow en cada direcció

També es pot controlar per separat:

Propietat	Controla
overflow-x	desbordament horitzontal
overflow-y	desbordament vertical

Exemple:

.caixa {
    width: 200px;
    height: 100px;
    overflow-x: scroll;
    overflow-y: hidden;
}

---

Quan utilitzar cada valor

• visible: Només quan vols que el contingut isca de la caixa (efectes, dissenys concrets). Risc: pot trencar el layout.

• hidden: Per ocultar desbordament, útil en:

  • imatges redimensionades
  • caixes decoratives
  • targetes amb contingut limitat

• scroll: Per a caixes que sempre han de tindre scroll (llistes, logs, xats).

• auto: El més recomanat: mostra scroll només si és necessari.

---

Relació entre Overflow i Flex/Grid

A partir d’ara, quan utilitzes Flexbox (3.5) o CSS Grid (3.6):

• overflow: hidden ajuda a retallar elements flexibles.
• overflow: auto és comú en layouts amb columnes o seccions amb scroll intern.
• overflow evita que el contingut “rebente” la quadrícula.

Per això, Overflow és l’últim element del model de caixa abans d’entrar en els sistemes de disseny moderns.

---