Html CSS溢出：自动隐藏超过父级大小的绝对定位子元素

我有一个DIV，它将是页面的宽度，但内容可能太宽，无法容纳。我已经为它设置了overflow-x:auto，以便内容可以滚动。 我的问题是，我想让每个子div在您将鼠标悬停在其上时展开并可见，但如果它们超过父div，则当前会被剪裁

这是

HTML:

填充“content”div是一种解决方法，但并不能真正解决我的问题。有哪位CSS大师还有几秒钟要浪费？我知道这很容易解决。谢谢

尝试从“.Content”中删除“overflow”属性，并将其包装到另一个类中。例如：

<div class='MainContainer'>
<div class='Content'>
    <div class='ImageContainer'>
        <div class='Image'>Container 1</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 2</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 3</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 4</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 5</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 6</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 7</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 8</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 9</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 10</div>
    </div>
</div>
    </div>

请在此处查看结果：

---

通过完全消除滚动条，我能够使图像容器扩展到父div之外

这并不理想，但我无法在这里找到解决方案，除了：

---

您将无法单独使用CSS实现这种布局行为，您需要一些JavaScript/jQuery。我想您只是再次链接了我的JSFIDLE。不过，我根据您的想法创建了一个JSFIDLE，并在主容器中添加了一个边框（和一个边距），以便您可以看到它仍然隐藏着任何溢出。

.Content {
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
}
.ImageContainer {
    position:relative;
    width:100px;
    height:150px;
    display:inline-block;
}
.Image {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:1;
    border:1px solid black;
    background-color:#AAA;
}
.Image:hover {
    left:-10px;
    top:-10px;
    right:-10px;
    bottom:-10px;
    z-index:2;
}

<div class='MainContainer'>
<div class='Content'>
    <div class='ImageContainer'>
        <div class='Image'>Container 1</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 2</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 3</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 4</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 5</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 6</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 7</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 8</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 9</div>
    </div>
    <div class='ImageContainer'>
        <div class='Image'>Container 10</div>
    </div>
</div>
    </div>

.MainContainer{
    width:100%;
    height:220px;
    overflow-x:scroll;
    overflow-y:hidden;
}

.Content {
    margin:30px 0px;
    white-space:nowrap;
position:relative;
}

.Content {
    text-align:center;
    margin:15px;
    border:1px solid black;
}
.ImageContainer {
    position:relative;
    width:80px;
    height:150px;
    display:inline-block;
}
.Image {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:1;
    border:1px solid black;
    background-color:#AAA;
}
.Image:hover {
    left:-15px;
    top:-15px;
    right:-15px;
    bottom:-15px;
    z-index:2;
}