Переполнение-y видно, но переполнение-x в родительском скрыто

Question

Вероятно, об этом спрашивали миллион раз, и я просмотрел некоторые темы, но все еще не смог реализовать его по мере необходимости.

Я хотел бы показать информационные поля с абсолютным позиционированием при наведении курсора внутри карусели, единственный способ, которым я могу выполнить эту работу, - всякий раз, когда у одного из родителей отключено переполнение, но это также будет означать, что переполнение оси X станет видимым -> нежелательный эффект.

У меня есть следующая html разметка:

<div class="container">
    <div class="wrap-outer">
        <div class="wrap">

        <div class="box">
            <div class="box--title">Title</div>
            <div class="box--hidden">
                <div class="box--hidden-inner">
                    Hidden Text, show on hover
                </div>
            </div>
        </div>
        ...

    </div>

</div>

и с css поигрались с некоторыми опциями, и это последний (не работает):

.wrap-outer {
    overflow-x: hidden;
}

.wrap {
    width: 1800px;
    overflow-y: visible; /* not working! */
}

.box {
    display: inline-block;
    padding: 20px;
    background: #eee;
    margin: 0px auto;
    position: relative;
    width: 250px;
    text-align: center;
    margin: 7px;
}

.box--hidden {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    overflow: hidden; /* when removed, still not working */
    transition: all 0.3s ease;
    max-height: 0;
}

.box:hover .box--hidden {
    max-height: 200px;
}

Опять я проверил некоторые посты на SO, но не могут воспроизвести его для конкретной c карусели, созданной с помощью слайдера Slick, поэтому не стреляйте в меня.

( fiddle ) ( fiddle с скользящим ползунком )

Спасибо.