css property-overflow

overflow : Define how to display when the content of an element is too large to fit the block-level formatting context It is shorthand for the attributes of overflow-x and overflow-y

value

• visible [default value]
  The content will not be trimmed, and overflow will appear outside the element box.
• hidden
  The overflow content is clipped, invisible, and scroll bars are not provided.
• scroll
  The overflow content is clipped, and the browser displays a scroll bar to view the overflow content.
• auto
  If the content does not overflow, no scroll bar is displayed;
  If the content overflows, similar to scroll , display the scroll bar to view the overflow content;

1. visible (default value) will create a new block-level formatting context;
2. In order for overflow be effective, the block-level container must have a specified height ( height or max-height ) or set white-space to nowrap .

grammar

Choose one or two keywords from the value to specify the overflow attribute:
overflow: overflow-x overflow-y；
If a keyword is set, overflow-x and overflow-y set to the same value.
You can also set values overflow-x and overflow-y

overflow-x: scroll;
overflow-y: hidden;
/* On Firefox 61 and 62, this is the same as */
overflow: hidden scroll;
/* But on Firefox 63 and later, it will be */
overflow: scroll hidden;

Setting one axis to visible (default value), while setting the other axis to a different value, will cause the behavior of the axis visible auto .

Practical problems

y-axis overflow scroll bar, x-axis overflow display

I thought that overflow-y: auto; could be solved, but the actual x-axis overflow content is not displayed;
Then modify it to overflow-y: auto; overflow-x: visible; or overflow: visible auto , so that after the x-axis overflows, no clipping or scroll bars appear. The actual result is that the x-axis overflow content is not displayed.

Reason
One axis is visible and the other axis is a different value, which will cause the behavior of the axis visible auto .