How to Fix Element Going Out of Div When Resized Bigger Again

The overflow property controls what happens to content that breaks outside of its bounds: imagine a div in which you've explicitly fix to be 200px broad, simply contains an image that is 300px broad. That image will stick out of the div and be visible by default. Whereas if yous set the overflow value to hidden, the image will cut off at 200px.

          div {   overflow:  visible | subconscious | scroll | auto | inherit }

Values

visible: content is non clipped when information technology proceeds outside its box. This is the default value of the property
hidden: inundation content will exist hidden.
scroll: similar to hidden except users volition be able to coil through the hidden content.
clip: content is clipped when it proceeds outside its box. This can be used with overflow-clip-margin to set the clipped area.
auto: if the content proceeds outside its box and then that content will exist hidden whilst a scroll bar should exist visible for users to read the remainder of the content.
initial: uses the default value which is visible
inherit: sets the overflow to the value of its parent chemical element.

Remember that text will naturally wrap at the end of an element (unless white-space is changed) so text will rarely exist the crusade of overflow. Unless a summit is set, text will just push an chemical element taller as well. Overflow comes into play more ordinarily when explicit widths and heights are set and it would be undesirable for whatsoever content to spill out, or when scrolling is explicitly existence avoided.

`visible`

If you don't prepare the overflow property at all, the default is visible. So in general, there is no reason to explicitly set this belongings to visible unless you are overriding it from beingness ready elsewhere.

The important thing to remember here is that even though the content is visible outside of the box, that content does not affect the menstruation of the page. For case:

Generally, you shouldn't be setting static heights on boxes with web text in them anyway, so it shouldn't come upward.

`subconscious`

The opposite of the default visible is subconscious. This literally hides any content that extends beyond the box.

This is particularly useful in apply with dynamic content and the possibility of an overflow causing serious layout problems. Nonetheless, behave in mind that content that is subconscious in this way is utterly inaccessible (short of viewing the source). So for example a user has their default font size set larger than you would wait, you lot may exist pushing text outside of a box and hiding information technology completely from their view.

`scroll`

Setting the overflow value of a box to coil volition hibernate the content from rendering outside the box, just volition offer scrollbars to scroll the interior of the box to view the content.

Of note with this value is that you get BOTH horizontal and vertical scrollbars no matter what, fifty-fifty if the content requires simply one or the other.

iOS' momentum scrolling tin be enabled for this value with -webkit-overflow-scrolling.

Note: In Os X Lion, when scrollbars are ready to only prove when beingness used, coil behaves more than like auto, in that only needed scrollbars will evidence up.

`auto`

Auto overflow is very similar to the whorl value, simply it solves the problem of getting scrollbars when you lot don't need them. The scrollbars volition only show up if in that location is content that actually breaks out of the chemical element.

overflow-10 and overflow-y

It's also possible to manipulate the overflow of content horizontally or vertically with the overflow-x and overflow-y properties. For instance in the demo beneath the horizontal overflow can exist scrolled through whilst the text that extends beyond the height of the box is hidden:

          .box {   overflow-y: hidden;   overflow-10: scroll; }

Clearing floats

One of the more than popular uses of setting overflow, strangely enough, is bladder clearing. Setting overflow doesn't articulate the float at the chemical element, information technology self-clears. This means that the element with overflow (any value except visible) will extend every bit large every bit it needs to encompass child elements inside that are floated (instead of collapsing), assuming that the height isn't declared. Similar this:

A better bladder immigration technique is the clearfix, equally it doesn't require you to alter the overflow property in a way y'all don't need.

Generating block formatting context

Information technology's interesting to annotation that overflow volition too create a new cake formatting context which is useful if we want to marshal a block element adjacent to a floated one. In the example below we testify how a number of paragraphs will interact with a floated image by default then nosotros use overflow: subconscious to align the text within its own box:

This comes from a great post past Nicole Sullivan which went on to inspire the media object.

Can scrollbars be styled with CSS?

You used to be able to style scrollbars in IE (v5.5?) but no more than. Yous can style them now again in WebKit browsers. If you demand cantankerous-browser custom scrollbars, await to JavaScript.

If an element needs to accept scrollbars appended to honor the overflow value, Firefox puts them exterior the element, keeping the visible width/tiptop equally declared. IE puts the scrollbars inside, keeping the overall width/peak as alleged.

Demo

Demos for this commodity taken from this sample page.

Browser Support

Desktop

Chrome	Firefox	IE	Edge	Safari
xc	81	11	90	TP

Mobile / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
101	100	101	15.4

More than information

Agreement the Apprehensive Clearfix
Overflow: a undercover benefit
Overflow on MDN
Overflow on W3C
Finding/fixing unintended body overflow

Almanac on February 26, 2021

float

alatorreares1945.blogspot.com

Source: https://css-tricks.com/almanac/properties/o/overflow/