RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/overflow below:

overflow · WebPlatform Docs

overflow Summary

The overflow property controls how extra content exceeding the bounding box of an element is rendered. It can be used in conjunction with an element that has a fixed width and height, to eliminate text-induced page distortion.

Overview table

Initial value: visible
Applies to: non-replaced block-level elements and non-replaced ’inline-block’ elements
Inherited: No
Media: visual
Computed value: as specified, except ‘visible’
Animatable: No
CSS Object Model Property: overflow

Syntax

overflow: <overflow-x> <overflow-y>
overflow: auto
overflow: hidden
overflow: no-content
overflow: no-display
overflow: scroll
overflow: visible

Values

visible: The default value for most elements. Content is not clipped and a scroll mechanism is not added.
scroll: Content is clipped and a scroll mechanism is added, even if the content does not exceed the dimensions of the object.
hidden: Content that exceeds the dimensions of the object is not shown. No scroll mechanism is applied.
auto: Content is clipped and scrolling is added only when necessary.
no-display: When the content doesn’t fit in the content box, the whole box is removed, as if ‘display: none’ were specified.
no-content: When the content doesn’t fit in the content box, the whole content is hidden, as if ‘visibility: hidden’ were specified.
<overflow-x> <overflow-y>: Set overflow-x and overflow-y separately.

Examples

Add different behavior for paragraphs via the overflow property.

.hidden {
    overflow: hidden;
}
.scroll {
    overflow: scroll;
}
.auto {
    overflow: auto;
}
.visible {
    overflow: visible;
}


p {
    height: 60px;
}

View live example

Clearing floats with overflow

.clear {
    overflow: hidden;
    background: green;
}


.floating {
    float: left;
    width: 200px;
}

View live example

Two values for overflow.

.overflow-y {
    overflow: hidden auto;
    height: 30px;
}

View live example

Usage

 The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.

The overflow property takes up to two values. If given one value, both overflow-x and overflow-y are set to that value. If given two values, the first value applies to overflow-x and the second applies to overflow-y.

Using the overflow property with a value different than visible, its default, will create a new block formatting context. This is technically necessary as if a float would intersect with the scrolling element it would force to rewrap the content of the scrollable element around intruding floats. The rewrap would happen after each scroll step and would be lead to a far too slow scrolling experience. Note that, by programmatically setting scrollTop to the relevant HTML element, even when overflow has the hidden value an element may need to scroll.

Notes

The default value for the html element is auto. Setting the overflow property to visible causes the content to clip to the size of the window or frame that contains the object.

CSS basic box model

Specifying two values is currently not supported by browsers.

Firefox (Gecko) Notes

Through Firefox 3.6 (Gecko 1.9.2), the overflow property is incorrectly applied to table-group elements (<thead> , <tbody> , <tfoot>). This behavior is corrected in later versions.

Internet Explorer Notes

Internet Explorer 4 to 6 enlarges an element with overflow: visible (default value) to fit the content in it. height/width behaves like min-height/min-width.

CSS 2.1, Section 11.1.1

Related specifications

CSS Level 2 (Revision 1): Recommendation
CSS3 module: The box model: Working Draft
CSS basic box model: Working Draft