Cascading style sheets are easy to use if you do not go into the jungle of inheritance, prioritization, class structure, theoretical points, and practical experience.
The main purpose of each CSS property is to display, but that doesn’t mean at all “visible”: the CSS Overflow hidden construct is just as important.
Page Elements
The page contains not only elements, but elements of elements can be located on it, whether it be frames (and this can be not only a set of components, but also another site as a whole) or systems of objects made by hand.
Naturally, the overwhelming majority of website developers practice rubber typesetting, they have to reckon with the growing amount of information and the fact that the 800 by 600 pixel barrier is not at all the 640 KB barrier that the mentality of the creators of MS DOS overcame for several decades, which made life difficult for programmers and users first staff.
In site building, everything is initially simpler: the page does not fit on the screen, the browser makes it scroll. Although the developer may envisage displaying the contents of the page in a window without scrolling bars and without other properties: the contents of the page will never crawl out of the window allocated to it. This is natural, other applications are outside the window, and the browser window is no better than other windows: the operating system always stands for the equality of applications.
However, no matter how priorities are set in choosing a layout option, no matter how visitors are divided in the optimal screen resolution for viewing sites, today there are different screens that do not always have rectangular capabilities of a fixed size.
A dynamic world through Overflow CSS
It is accepted that the page of a site is content laid out by hypertext tags that indicate how to display it in a particular case under certain conditions.
Everything is constantly changing. Even if the site is such that its content cannot be changed for many years, there is no guarantee that an unexpected visitor will not open it on a new device, which the developer of this site did not even know about.
There are only four options for properties of the Overflow CSS rule : it is allowed to hide everything that goes beyond the element’s area, display, provide scrolling always or only when necessary, or inherit the value from the ancestor.
In the first case (overflow: hidden), all content that goes beyond the element will be hidden, and what is hidden will not be available. This position is effective, but no less interesting is the option to show everything that goes beyond (overflow: visible). So the developer provides the visitor with the opportunity to always have an idea of the full content of the element and manage its volume. Scrolling gives less options (overflow: scroll - scroll bars are always there; or overflow: auto - scroll bars appear as needed).
Features of using the Overflow rule
Elements that are inside a tag that has CSS "text overflow " meaning are of special interest only when they are text. The placement of other components is usually fixed by coordinates or relative positions.
Text elements do not always contain a fixed number of characters, and if it becomes necessary to use the overflow rule , CSS is instructed to control options for unexpected changes in the volume of content.
In particular, at the debugging stage, you can apply the value of the auto or scroll properties, and then block the display of everything that goes beyond the area, providing the visitor with a set of buttons with which he will move the invisible content into the visible area. This is a common practice. Not everyone is impressed by the scroll bar, some prefer four buttons to it: to the beginning, forward, backward, to the end.
In addition, the overflow CSS rule in the auto / scroll value brings an element of unpleasant uncertainty to the page: the browser transfers the priority in scrolling from the page to its element when the mouse pointer is over it.
When an element is a text block, it is not too noticeable and inconvenient, but if you place a slider (block of picture elements) over the entire width of the window, you can’t overcome this design with the mouse, you often have to use the "start" or "end" buttons pages".
Scrolling Priorities
The dialogue of a site’s page with a visitor is essential, as is its design, development, content. Since the site opens a browser and does this in its own window or in a separate tab, then most likely the page should have the right to scroll, and not its element. The latter can be not only many, but each can have its own function.
The site always carries a specific meaning, even if it belongs to the field of philosophy, mysticism or other unexpected content. That is why you can always assume a specific dialog load on elements with the CSS overflow rule.
In particular, if the element is a selector for selecting the year (date), then the classic selector will be inconvenient, and its scroll bar will cause obvious inconvenience. Applying overflow in this case, CSS can be effectively used in addition: internal fields in the element, highlight periods, provide the visitor with the opportunity to quickly and conveniently set the desired date, month, year.