CSS clip, имитация overflow

По работе необходимо было задать объекту

.chart { 
   overflow-x: visible; 
   overflow-y: hidden; 
}

Но сделать это невозможно, потому что :

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’.

И в процессе поиска обнаружилось внезапно совершенно кроссбраузерное свойство clip, позволяющее создавать прямоугольные маски на совершенно любых блоках:

.clip-me { 
   position: absolute; 
   clip: rect(top, right ,left , bottom);
}

Причем маски вполне себе могут выходить за пределы котейнера, что я и использовала, чтобы скрыть лишнее по вертикали, но оставить по горизонтали (пример на codepen):

clip: rect(auto,2000px, auto, auto);

Дополнительно

У clip есть несколько нюансов:

• контейнер должен быть позиционирован через absolute или fixed
• если у контейнера нет фиксированной высоты/ширины, для имитации overflow: visible нужно придумать магическое число, превышающее любую возможную высоту/ширину
• порядок параметров отличается от типичного порядка для задания прямоугольников (но при этом повторяет стандартный порядок для позиционирования)
• если указать bottom меньше, чем top (аналогично c left/right), ничего работать не будет

Есть еще и задорное свойство clip-path, но, к сожалению, кроссбраузерностью и не пахнет