Articles
Introduction to CSS
`overflow` and `contain` Properties

`overflow` and `contain` Properties

This article explains the overflow and contain properties.

You can learn how to describe things like displaying scrollbars and clipping with the overflow property.

YouTube Video

HTML for Preview

css-overflow-contain.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-overflow-contain.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Overflow Content</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Overflow And Contain Properties</h2>
 20        </header>
 21        <article>
 22            <h3>overflow</h3>
 23            <section>
 24                <header><h4>overflow: visible</h4></header>
 25                <section class="sample-view" style="height: 100px;">
 26                    <section class="overflow-visible">
 27                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 28                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 29                    </section>
 30                </section>
 31                <header><h4>overflow: hidden</h4></header>
 32                <section class="sample-view">
 33                    <section class="overflow-hidden">
 34                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 35                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 36                    </section>
 37                </section>
 38                <header><h4>overflow: scroll</h4></header>
 39                <section class="sample-view">
 40                    <section class="overflow-scroll">
 41                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 42                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 43                    </section>
 44                </section>
 45                <header><h4>overflow: auto</h4></header>
 46                <section class="sample-view">
 47                    <section class="overflow-auto">
 48                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 49                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 50                    </section>
 51                </section>
 52                <header><h4>overflow-x: scroll; overflow-y: hidden;</h4></header>
 53                <section class="sample-view">
 54                    <section class="overflow-xy">
 55                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 56                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 57                    </section>
 58                </section>
 59                <header><h4>overflow: clip</h4></header>
 60                <section class="sample-view">
 61                    <section class="overflow-clip">
 62                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 63                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 64                    </section>
 65                </section>
 66            </section>
 67        </article>
 68        <article>
 69            <h3>contain</h3>
 70            <section>
 71                <header><h4>contain: layout</h4></header>
 72                <section class="sample-view">
 73                    <section class="contain-layout">
 74                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 75                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 76                    </section>
 77                </section>
 78                <header><h4>contain: paint</h4></header>
 79                <section class="sample-view">
 80                    <section class="contain-paint">
 81                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 82                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 83                    </section>
 84                </section>
 85                <header><h4>contain: size</h4></header>
 86                <section class="sample-view">
 87                    <section class="contain-size">
 88                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 89                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 90                    </section>
 91                </section>
 92                <header><h4>contain: style</h4></header>
 93                <section class="sample-view">
 94                    <section class="contain-style">
 95                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 96                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 97                    </section>
 98                </section>
 99                <header><h4>contain: content</h4></header>
100                <section class="sample-view">
101                    <section class="contain-content">
102                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
103                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
104                    </section>
105                </section>
106            </section>
107        </article>
108    </main>
109</body>
110</html>

overflow and contain Properties

overflow

The CSS overflow property is an important property that controls how to display the contents of an element when they exceed the size of its box. It is commonly used to shape the layout and user interface of web pages, helping to manage the display of scrollbars, clipping, and element overflow.

Basics of the overflow Property

The overflow property has four main values: visible, hidden, scroll, and auto.

visible 
1section.overflow-visible {
2    border: 2px dashed gray;
3    width: 400px;
4    height: 50px;
5    overflow: visible;
6}

visible is the default value, where the contents of an element overflow beyond the size of the box but still remain visible. The overflowed parts may overlap other elements, but scrollbars are not displayed in particular.

Features:

  • Content is displayed without limitation.
  • No scrollbars are shown.
hidden 
1section.overflow-hidden {
2    border: 2px dashed gray;
3    width: 400px;
4    height: 50px;
5    overflow: hidden;
6}

hidden is the setting where if the contents of an element exceed the size of the box, the overflowed parts are not displayed. No scrollbars are displayed, and the overflowed content won't be visible.

Features:

  • When content exceeds the element's boundary, the excess part is hidden.
  • No scrollbars are shown.
scroll 
1section.overflow-scroll {
2    border: 2px dashed gray;
3    width: 400px;
4    height: 50px;
5    overflow: scroll;
6}

When scroll is used, scrollbars are forcibly displayed if the element's content exceeds the box. Even if the content does not overflow, scrollbars are always displayed.

Features:

  • Scrollbars are shown even if content fits within the element's boundary.
  • Scrolling is possible in horizontal and vertical directions.
auto 
1section.overflow-auto {
2    border: 2px dashed gray;
3    width: 400px;
4    height: 50px;
5    overflow: auto;
6}

auto displays scrollbars only when the content overflows; if the content fits within the element's box, no scrollbars are displayed.

Features:

  • Scrollbars appear only when content overflows.
  • Automatically creates a scrollable area.
overflow-x and overflow-y 
1section.overflow-xy {
2    border: 2px dashed gray;
3    width: 400px;
4    height: 50px;
5    overflow-x: scroll;
6    overflow-y: hidden;
7}

The overflow property can also be controlled individually for the horizontal (x axis) and vertical (y axis) directions.

In this way, you can use overflow-x and overflow-y to set the display of vertical and horizontal scrollbars individually.

Considerations for Overflow

When using the overflow property, there are some points that you need to be careful about.

Effects on design due to the display of scrollbars

Using scroll or auto to display scrollbars can disrupt the overall design of the page. In particular, if elements are placed at the right or bottom edge, scrollbars can make them less visible.

Default browser behavior

The way scrollbars are displayed and function can vary between browsers. Especially between Windows and macOS, there are differences in scrollbar display styles, which can cause designs not to appear as intended. It is important to conduct cross-browser testing.

Overflow of child elements

Setting overflow: hidden on a parent element hides child elements that exceed the parent's box. This may cause pop-ups and modal windows to not display correctly.

overflow: clip (CSS Level 3) 

1section.overflow-clip {
2    border: 2px dashed gray;
3    width: 400px;
4    height: 50px;
5    overflow: clip;
6}

In the new CSS specification, a value called overflow: clip has also been introduced. This is similar to hidden, but it does not allow scrolling and only clips the content.

Features:

  • If the content overflows, that part will be completely hidden.
  • No scrollbars are shown.

Conclusion

The CSS overflow property is an essential tool for controlling the display of content in web design. By managing situations where content exceeds the element's box and by applying proper scrollbars or clipping, it provides users with a more user-friendly interface. Furthermore, using overflow-x and overflow-y allows for fine-tuned control.

contain

Overview of the contain property

The CSS contain property limits the influence an element has on other elements and the entire page, optimizing the browser's rendering process. Specifically, it confines reflows and repaints by preventing style or layout changes in an element from affecting content outside that element.

This is important for web page performance and is particularly effective for websites with complex layouts or large amounts of content.

Values for contain

The contain property has the following values:.

layout 
1section.contain-layout {
2    width: 300px;
3    height: 100px;
4    contain: layout;
5}

layout applies restrictions related to layout. By using this value, the size and position of an element do not affect other elements. For example, even if an element is resized internally, that change does not affect the external layout.

paint 
1section.contain-paint {
2    width: 300px;
3    height: 100px;
4    contain: paint;
5}

paint limits the impact of painting (drawing). When this value is specified, drawing within the element no longer affects external elements, thereby limiting the range of repaint calculations.

size 
1section.contain-size {
2    width: 300px;
3    height: 100px;
4    contain: size;
5}

size ensures that the element's size does not depend on external elements. Specifically, it prevents the resizing of child elements from affecting the parent element's size, thereby enhancing layout stability.

style 
1section.contain-style {
2    width: 300px;
3    height: 100px;
4    contain: style;
5}

style ensures that an element's style does not affect external elements. For example, specifying contain: style; ensures that style changes in that element do not impact other elements, reducing the range of recalculations.

content 
1section.contain-content {
2    width: 300px;
3    height: 100px;
4    contain: content;
5}

content is a composite value that applies layout, paint, size, and style. Using this, you can ensure that the element's layout, drawing, size, and style have no impact on external elements at all.

Performance benefits

The main reason for using the contain property is to improve web page performance. In particular, it is effective in the following situations.

  1. Reflow Optimization: When the size or layout of an element changes, its impact can be limited to the smallest possible scope. This reduces the scope of unnecessary reflows (layout recalculations) and eases the load on the browser.

  2. Reducing Repaints: By limiting the drawing area, the portion that needs to be repainted when an element's style or content changes can be minimized.

  3. Component-based Development: Since each component or module operates independently from other elements, it enhances the performance of each component even in large-scale web applications.

Notes

When using the contain property, you should keep the following points in mind.

  1. Understanding the Scope of Application: The contain property is helpful for performance optimization, but it should not be applied to every element. It is important to use it appropriately in suitable places. For example, using it on frequently changing elements or parts of a large DOM structure might degrade performance instead.

  2. Browser Compatibility: The contain property is a relatively new CSS feature and is not fully supported by all browsers. It is supported in major browsers (Chrome, Firefox, Edge, Safari), but might not be applicable in older versions.

Conclusion

The CSS contain property is a powerful tool for optimizing the performance of web pages and applications. By limiting the impact a specific element has on others, it reduces reflow and repaint costs, streamlining the overall rendering process. However, it is important to carefully consider where to apply it and use it appropriately.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

Comparison of Flexbox, Grid, and Column Layouts