Html 溢出-y可见，但父级上的溢出-x隐藏

这可能已经被问了一百万次了，我已经经历了一些线程，但仍然无法根据需要实现它

我想在旋转木马中显示悬停时的绝对位置信息框， 我唯一能做到这一点的方法是，只要父级中的一个已关闭溢出， 但这也意味着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>

再一次，我确实检查了SO上的一些帖子，但无法为使用Slick slider创建的特定旋转木马复制它，所以不要向我开枪

（） （）

---

谢谢。

嘿，有两个想法：1）这只适用于工具提示的高度限制：为工具提示和负边距底部提供滑块填充底部作为占位符空间：2）通过js将工具提示安排在滑块外部。@TiHausmann，我尝试过这种方法，但出现了一些问题，主要问题是，滑块下的指针事件现在是滑块的拖动事件：（是的，这是有问题的。要修复指针问题，您只能在悬停时应用填充

.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;
}