CSS中overflow-y:visible;不起作用怎么辦

這篇文章給大家分享的是有關CSS中overflow-y: visible;不起作用怎么辦的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

成都創新互聯公司專注為客戶提供全方位的互聯網綜合服務，包含不限于成都網站設計、成都網站建設、外貿網站建設、雄縣網絡推廣、小程序定制開發、雄縣網絡營銷、雄縣企業策劃、雄縣品牌公關、搜索引擎seo、人物專訪、企業宣傳片、企業代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；成都創新互聯公司為所有大學生創業者提供雄縣建站搭建服務，24小時服務熱線：18982081108，官方網址：m.kartarina.com

場景

最近要做的一個需求是移動端的h6頁面，要求有一排可選擇的卡片, 超出容器部分可以左右滑動，同時每張卡片左上角要有一個刪除按鈕。

心想：so easy, 在父容器上加一個max-width: 200px; white-space: nowrap; overflow-x: auto;不就搞定了嘛。Demo如下：

<div class="container">
  <div class="son">
    <div class="delete_btn"></div>
  </div>
  <div class="son">
    <div class="delete_btn"></div>
  </div>
  <div class="son">
    <div class="delete_btn"></div>
  </div>
</div>

.container {
  max-width: 500px;
  overflow-x: auto;
  white-space: nowrap;
}

.son {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: lightblue;
  position: relative;
  margin-right: 20px;
}

.delete_btn {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  transform: translateX(-50%) translateY(-50%);
}

原本以為一切順利，結果得到的結果如圖：

CSS中overflow-y: visible;不起作用怎么辦

看第矩形左上角的紅色方塊，原本為20 * 20的紅色方塊有一部分被隱藏了。我想應該是overflow影響的，所以想通過overflow-y: visible;來解決,結果是不行的。細心的朋友應該記得overflow的默認值就是visible。那么原因是什么呢？

Why

找了好久，大致了解到是如下原因

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為scroll或者auto時，overflow-y被設置為auto，反之亦然。這就很尷尬了，那怎么解決這個問題呢。

ps: 上面那段話說是來自于w3c的文檔，但是我找了半天沒找到原文，麻煩找到了的小伙伴留個鏈接~ [手動狗頭]