Как вывести список элементов за пределы div при наведении курсора, с включенным переполнением?

Question

Я пытаюсь создать эффект, напоминающий ма c, для списка, чтобы размер элементов списка увеличивался при наведении курсора.
Вот скрипка: jsfiddle
Проблема в том, что я не могу заставить элементы выскочить наружу при появлении горизонтальной полосы прокрутки. Я не могу установить для родительского элемента значение overflow: visible, поскольку высота вертикали должна иметь фиксированное значение и должна быть прокручиваемой. Таким образом, желательно, чтобы элементы списка выскочили при наведении курсора. Горизонтальная полоса прокрутки не требуется.

Answer 1

попробуйте

li {
        cursor: pointer;
        transition: 0.5s;
        background: #d00;
        display: block;
       
        text-align:center; /* Make Text Centered */
        padding:5px 0px;  /* ADD PADDING to TOP AND BOTTOM */
        /* ADD TRANSITION */
       transition:transform 0.2s ease-in-out 0s;
        
    }

    li:hover {
       
        transform: scale(1.4);
       
    }

<!--- ADD overflow-x:hidden; to hide horizontal scroll bar --->
<div style="overflow-y: auto; overflow-x: hidden; width: 100%; height: 100%;">