Overflow

We saw an example on the last page, where the text inside an element, “overflowed” its containing box. We can choose to ignore this situation, resize our elements so they fit the content, or tell the browser what to do with extra content.

In the latter option, we will use the “overflow” CSS property (overflow: ). This property takes one of three values;

visible; this is the default.
hidden; overflow content will be hidden.
scroll; scroll bars will be provided for overflow content.

The following example, is adapted from the last page. It shows the same sets of boxes with Lorem Ipsum three times. Each set has the overflow set to; scroll, hidden, and visible, respectively.

CSS

.overflow-scroll {
    overflow: scroll;
}
.overflow-hidden {
    overflow: hidden;
}
.overflow-visible {
    overflow: visible;
}
.parent-container-01 {
    width: 100%;
    max-width: 960px;
    min-width:400px;
    height: 300px;
    background-color: #dc8eff;
    margin-bottom: 10px;
}
.inner-box-01 {
    width: 75%;
    height: 50%;
    background-color: #8efffc;
}

Inner Scroll Box

Scroll me

Amet duis culpa in commodo ut enim incididunt minim consequat laborum dolore nostrud nisi. Nulla enim anim labore enim irure Lorem magna commodo sit amet elit et voluptate tempor enim. Laboris pariatur sunt id ea excepteur deserunt nisi cillum deserunt reprehenderit et deserunt.

Adipisicing et exercitation ea voluptate non culpa consequat nisi. Voluptate do nulla nulla deserunt adipisicing sint officia consectetur aliqua duis. Aliquip laboris aute ut consectetur minim officia minim reprehenderit reprehenderit. Ea tempor exercitation sunt mollit id amet minim eiusmod adipisicing cillum quis. Exercitation aliqua excepteur dolore in non consequat exercitation cupidatat sunt. In exercitation sunt duis adipisicing ut incididunt reprehenderit sit ullamco cupidatat ullamco duis exercitation mollit elit velit velit. Cupidatat nulla officia laboris enim velit tempor et eu.

Outer Scroll Box

Scroll Me!

Unfortunatly, when the browser is narrow, there is not enough room in the box for all of this extra text, so it will run outside of the box.

Ipsum laborum amet exercitation pariatur tempor ea cupidatat proident duis nostrud. Lorem aliquip veniam eiusmod do laborum ullamco ex id culpa consequat dolore non tempor in excepteur enim aliqua. Dolor commodo officia culpa aliqua nulla sunt non consectetur aute amet culpa nisi aute elit velit commodo dolore. Occaecat laboris et irure labore elit commodo est nisi ut ea sint occaecat aliquip sit fugiat.

Inner Hidden Box

Once my content overflows, it is gone...

Outer Hidden Box

Once my content overflows, it is gone...

Unfortunatly, when the browser is narrow, there is not enough room in the box for all of this extra text, so it will run outside of the box.

Inner Visible Box

I am spilling out everywhere...

Outer Visible Box

I am spilling out everywhere...

Unfortunatly, when the browser is narrow, there is not enough room in the box for all of this extra text, so it will run outside of the box.

[View on GitHub]

[Live Example]