水平溢出元素要求溢出-y 可見，為什么？

Question

我正在嘗試在對話框旁邊顯示一些溢出元素。 對話框是一個普通的相對定位 div（通過 Vuetify for vuejs）溢出元素應該顯示在對話框旁邊。

我已經用 vanilla html + css 復制了這個問題

運行這個，我們可以看到最里面的 div 被父 div 剪掉了。 但是，設置overflow-y: visible會使溢出元素正確顯示。

我的問題基本上是，當溢出在 x 軸上時，為什么溢出 y 在這里很重要？

 <div> <div style="width:50%;position:relative;left:25%;background-color:red;height:50%;overflow-y:auto;overflow-x:visible;"> aaa <div style="position:absolute;top:20px;left:90%;width:100px;height:100px;background-color:green"> bbb </div> </div> <div>

Answer 1

從規范：

計算值：如指定，除了可見/剪輯計算自動/隱藏（分別）如果溢出-x 或溢出-y 之一既不可見也不剪輯

因此，如果您將溢出之一設置為auto則另一個溢出也將計算為auto 。 在您的情況下， overflow-x將是auto並且不再visible 。

換句話說，您不能同時使用visible和auto 。 如果您同時使用兩者，則結果將是使用visible auto