19. Overflow

Leer en español

It lets us manage overflows, or cases where the content escapes the limits of the element.

Album 1 Album 2 Album 2

overflow

It will always be visible, even if there is an overflow.

.elemento {
  overflow: visible;
}

Éstas que fueron pompa y alegría despertando al albor de la mañana, a la tarde serán lástima vana durmiendo en brazos de la noche fría.

Este matiz que al cielo desafía, Iris listado de oro, nieve y grana, será escarmiento de la vida humana: ¡tanto se emprende en término de un día!

A florecer las rosas madrugaron, y para envejecerse florecieron: cuna y sepulcro en un botón hallaron.

Tales los hombres sus fortunas vieron: en un día nacieron y espiraron; que pasados los siglos, horas fueron.

It will hide the content.

.elemento {
  overflow: hidden;
}

Éstas que fueron pompa y alegría despertando al albor de la mañana, a la tarde serán lástima vana durmiendo en brazos de la noche fría.

Este matiz que al cielo desafía, Iris listado de oro, nieve y grana, será escarmiento de la vida humana: ¡tanto se emprende en término de un día!

A florecer las rosas madrugaron, y para envejecerse florecieron: cuna y sepulcro en un botón hallaron.

Tales los hombres sus fortunas vieron: en un día nacieron y espiraron; que pasados los siglos, horas fueron.

It behaves the same as hidden, but adds padding at the overflow limit. Currently it only works with Chromium-based browsers.

.elemento {
  overflow: clip;
  overflow-clip-margin: 1rem;
}

Éstas que fueron pompa y alegría despertando al albor de la mañana, a la tarde serán lástima vana durmiendo en brazos de la noche fría.

Este matiz que al cielo desafía, Iris listado de oro, nieve y grana, será escarmiento de la vida humana: ¡tanto se emprende en término de un día!

A florecer las rosas madrugaron, y para envejecerse florecieron: cuna y sepulcro en un botón hallaron.

Tales los hombres sus fortunas vieron: en un día nacieron y espiraron; que pasados los siglos, horas fueron.

Depending on the operating system, different situations occur. On Windows it will show the scroll bars even if they are not needed, while on MacOS they will only be visible when needed.

.elemento {
  overflow: scroll;
}

Éstas que fueron pompa y alegría despertando al albor de la mañana, a la tarde serán lástima vana durmiendo en brazos de la noche fría.

Este matiz que al cielo desafía, Iris listado de oro, nieve y grana, será escarmiento de la vida humana: ¡tanto se emprende en término de un día!

A florecer las rosas madrugaron, y para envejecerse florecieron: cuna y sepulcro en un botón hallaron.

Tales los hombres sus fortunas vieron: en un día nacieron y espiraron; que pasados los siglos, horas fueron.

Adds a scroll to move the content only in the case that it overflows.

.elemento {
  overflow: auto;
  /* Alternative */
  overflow: hidden visible;
}

Éstas que fueron pompa y alegría despertando al albor de la mañana, a la tarde serán lástima vana durmiendo en brazos de la noche fría.

Este matiz que al cielo desafía, Iris listado de oro, nieve y grana, será escarmiento de la vida humana: ¡tanto se emprende en término de un día!

A florecer las rosas madrugaron, y para envejecerse florecieron: cuna y sepulcro en un botón hallaron.

Tales los hombres sus fortunas vieron: en un día nacieron y espiraron; que pasados los siglos, horas fueron.

More information

overflow-y

Specifies only the vertical axis.

.elemento {
  overflow-y: hidden;
}

More information

overflow-x

Specifies only the horizontal axis.

.elemento {
  overflow-x: visible;
}

More information

A bad Web Designer uses overflow-x: hidden on <body>. A very common style to hide poor layout management of sizes. Unfortunately there will be 2 things that it won't be able to fix even if you add an !important: overflows and shame.

Activity 1

Let's help some visitors understand 3 types of architecture: Victorian, Baroque, and modern.

  • It must have a title for each type of architecture.
  • Below each one, there will be a div with its explanation.
  • The explanation must not exceed 10rem in height.
  • The texts must overflow the height, sticking out below.
  • The visitor must use a scroll to navigate through the whole explanation.

You can use Wikipedia to get the texts.

Activity 2

Starting from the following HTML.

<table>
    <caption>My table</caption>
    <thead>
        <tr>
            <th>Title 1</th>
            <th>Title 2</th>
            <th>Title 3</th>
            <th>Title 4</th>
            <th>Title 5</th>
            <th>Title 6</th>
            <th>Title 7</th>
            <th>Title 8</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
        </tr>
    </tbody>
</table>

Think of a way to adapt the table to Smartphone so that the content can be viewed by scrolling.

This work is under a Attribution-NonCommercial-NoDerivatives 4.0 International license.

Building SPAs with Django and HTML Over the Wire: Learn to build real-time single page applications with Python

Building SPAs with Django and HTML Over the Wire: Learn to build real-time single page applications with Python

The HTML over WebSockets approach simplifies single-page application (SPA) development and lets you bypass learning a JavaScript rendering framework such as React, Vue, or Angular, moving the logic to Python. This web application development book provides you with all the Django tools you need to simplify your developments with real-time results.

Buy the book

Help me keep writing

Every coffee gives me a push toward the next article.

Ko-fi donationsSure, it's on me!

Comments

There are no comments yet.