Значение overflow x y меняется на auto при задании только одной из координат CSS

Question

Споткнулся о следующее поведение параметра overflow:

Если значение overflow-x любое кроме initial, inherit, или unset то значение overflow-y уже не будет прежним, а поменяться на auto.

Это мне очень сильно жизнь подпортило, если кто знает, что можно тут придумать говорите не молчите :)

Ссылка на CodePen

* {
  box-sizing: border-box;
}

#one td, #two td {
  max-width: 100px;
  height: 30px;
  padding: 17px 10px;
  border: solid 1px black;
  position: relative;
  background: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
  overflow-y: hidden;
}

#table td:hover {
  overflow-x: overlay;
  text-overflow: initial;
}

td::after {
  content: "";
  width: 99px;
  height: 10px;
  background: red;
  position: absolute;
  left: -1px;
  bottom: -7px;
  cursor: n-resize;
  z-index: 999;
}

#one td {
  z-index: 2;
}

#two td {
  z-index: 1;
}

<table id="table">
  <tr id="one">
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, eligendi?</td>
  </tr>
  <tr id="two">
    <td>two</td>
  </tr>
</table>

Красная полоска подразумевается для resize'a ячеек и нужно разкомментировать overflow чтобы понять суть проблемы.

Answer 1

Дефолтное значение параметра overflow это visible, независимо от того используете ли Вы overflow-x, overflow-y, или просто overflow.

Значение overlay из Вашего примера не стандартизировано и официально поддерживается только Webkit браузерами.

Если Вы испытываете некорректное поведение данного параметра с определенным(и) браузерам(и), то стоит указывать требуемое Вам значение explicitly.

Пример использования:

div {
   overflow-x: hidden;
   overflow-y: scroll;
}

Answer 2

Из вопроса совершенно непонятно, что ты хочешь сделать, так что только про overflow.

visible может быть только одновременно по двум осям. Если хотя бы по одной из них ты ставишь что-то другое, то в такой комбинации оно работать не будет. Весьма вероятно, что в такой ситуации вместо visible используется auto. Однако, можно как угодно комбинировать scroll, hidden, auto и даже overlay, который снова поддерживается хромом.

Вполне возможно, поможет оборачивание в дополнительный контейнер, либо вынесение чего-то в отдельный элемент или псевдоэлемент.

БЛОГ НА HUSL

Значение overflow x y меняется на auto при задании только одной из координат CSS

Ответы (2 шт):