overflow-x

div.test { overflow-x: visible;}
div.test1 { overflow-x: hidden;}
div.test2 { overflow-x: scroll;}
div.test3 { overflow-x: auto;}

Value	Description
visible	Content overflows and is displayed. This 'visible' is the initial value.
hidden	The overflowing part is not displayed.
scroll	The overflowing part becomes scrollable.
auto	Leaves the display of overflowing content to the browser. In most browsers, this behaves the same as 'scroll'.

<div style="overflow-x: visible; white-space: nowrap; border: solid 1px red; width: 200px; height: 100px;">This is a div element with a width of 200px and height of 100px (red border).</div>

lt;div style="overflow-x: hidden; white-space: nowrap; border: solid 1px red; width: 200px; height: 100px;">This is a div element with a width of 200px and height of 100px (red border).</div>

<div style="overflow-x: scroll; white-space: nowrap; border: solid 1px red; width: 200px; height: 100px;">This is a div element with a width of 200px and height of 100px (red border).</div>

<div style="overflow-x: auto; white-space: nowrap; border: solid 1px red; width: 200px; height: 100px;">This is a div element with a width of 200px and height of 100px (red border).</div>

※ Version data is based on MDN / Can I Use.

Specifies how overflowing content is displayed along the x-axis (horizontal direction).

In most browsers, there is no visual difference between specifying 'auto' and 'scroll'.

The 'overflow-x' property was originally added as an IE-proprietary property, but it can now be used in virtually all browsers. However, since it originated as an IE-specific feature, thorough cross-browser testing is recommended.