跟
scroll
類似，但是只有必要的時候才會出現 scroll bar
overflow-x：可設定「水平」方向，當超出範圍時自動變成 scroll bar 呈現方式。(需要內有寬度大於元素框的物件)
overflow-y：可設定「垂直」方向，當超出範圍時自動變成 scroll bar 呈現方式。
有時候會遇到
overflow-x
或者是
overflow-y
無效，那是為什麼?
CodePen 範例
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
white-space: nowrap;
overflow-x: visible;
overflow-y: hidden;
/* added width so it would work in the snippet */
width: 100px;
display: inline-block;
padding: 20px;
根據
W3C spec
：
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.
簡單來說，如果在
overflow-x
或是
overflow-y
使用
visible
，且剩下的一個不是
visible
，那麼使用到
visible
的會被變成
auto
。
也就是下面這一張表格，所以上面的範例，
overflow-x: visible
變成
overflow-x: auto
，所以有 scrollbar。
overflow-x
overflow-y
解決方法：
CodePen
在外面加一個
div wrapper
，寬度占 100%，並設置
overflow: hidden
，表示超出這一個
div wrapper
的寬度，則要隱藏起來。
在原本的
ul
中，將
overflow: visible
，表示如果超出
ul
寬度，則一樣會顯示文字
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
div {
overflow-y: hidden;
/*debug only*/
border: 1px solid red;
white-space: nowrap;
overflow: visible;
/* added width so it would work in the snippet */
width: 100px;
/*debug only*/
border: 1px solid green;
display: inline-block;
padding: 20px;
參考資料：
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
[CSS] overflow 同時設置 visible 與其他屬性衝突問題
