css屬性 - overflow

overflow: 定義當一個元素的內容太大而沒法適應 塊級格式化上下文 時候該怎麼顯示。它是 overflow-x 與 overflow-y 屬性的簡寫。

值

• visible【默認值】
  內容不會被修剪，溢出會呈如今元素框以外。
• hidden
  溢出內容被剪裁，不可見，不提供滾動條。
• scroll
  溢出內容被剪裁，瀏覽器顯示滾動條查看溢出內容。
• auto
  若是內容不溢出，不顯示滾動條；
  若是內容溢出，相似於 scroll, 顯示滾動條查看溢出內容；

1. 除visible(默認值)之外的值，都會建立一個新的塊級格式化上下文；
2. 爲使overflow 有效果，塊級容器必須有一個指定的高度（height或者max-height）或者將white-space設置爲nowrap。

語法

從值中選出一個或兩個關鍵字來指定overflow 屬性:
overflow: overflow-x overflow-y；
若是設置一個關鍵字，overflow-x和overflow-y設置爲相同的值。
也可單獨對overflow-x和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;

設置一個軸爲 visible（默認值），同時設置另外一個軸爲不一樣的值，會致使設置 visible的軸的行爲會變成 auto。

實際問題

y軸溢出滾動條，x軸溢出顯示

原本覺得 overflow-y: auto;就能夠解決， 實際 x 軸溢出內容不顯示；
而後修改成 overflow-y: auto; overflow-x: visible;或 overflow: visible auto , 讓 x 軸溢出以後不剪切也不出現滾動條，實際結果仍是 x 軸溢出內容不顯示。

緣由
一個軸爲visible，另外一個軸爲不一樣的值，會致使設置visible的軸的行爲變成auto。