Overflow attribute usage of CSS

The overflow attribute of CSS has four values: visible (Default), hidden, scroll, and auto. Similarly there are two overflow sisters attributes Overflow-y and overflow-x, which are rarely used. Let's take a look at each of these values and discuss common usage and techniques.

Auto

Overflow's auto value is much like scroll, and it only solves the problem of scroll bars when you don't need them.

Hidden

The opposite value of the default value visible is hidden. It hides all the content that goes beyond the box. This is useful for coping with dynamic content and may cause some layout problems due to content overflow. However, keep in mind that the hidden content of this method will not be completely visible (unless you view the source code). For example, some users set their browser's default font larger than you expected, you will put some text to the outside of the box and then completely hidden ...

Visible

If you do not set the overflow property, the default overflow property value is visible. So in general, there's no reason to specifically set the overflow attribute to visible unless you want to overwrite the value it has set elsewhere. The important thing to remember here is that although the contents outside the box are visible, the content does not affect the workflow of the page. In general, you don't have to set a fixed height for the contents of a text box, so you don't have to do this.

Scroll

Setting the overflow value of a box to scroll will hide what is rendered outside the box, but it will provide a scroll bar to scroll inside the box to see what remains. It is worth noting that using scroll will produce both horizontal and vertical two scroll bars, even if the content requires only one of them.