Горизонтально Переполнение элемента требует, чтобы переполнение-y было видимым, почему?

Question

Я пытаюсь отобразить некоторые элементы переполнения рядом с диалогом. Диалог - это обычный относительный элемент div (через Vuetify для vuejs). Элементы переполнения должны отображаться рядом с диалогом.

Я повторил проблему с vanilla html + css

Запустив это, мы можем увидеть, что самый внутренний div обрезается родительским div. Однако, установка overflow-y: visible заставляет элемент переполнения отображаться правильно.

Мой вопрос в основном, почему переполнение-y имеет значение здесь, когда переполнение находится на оси x?

<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

От спецификация :

Вычисляемое значение: как указано, кроме как с видимым / клиповым вычислением для автоматического / скрытого (соответственно), если один из overflow-x или overflow- y не виден и не обрезает

Так что, если вы установите одно из переполнений на auto, другое также будет вычислено на auto. В вашем случае overflow-x будет auto и не более visible.

Другими словами, вы не можете иметь комбинацию visible и auto. Если вы используете оба, то результат будет auto для того, который использует visible