在父母之外展开子元素高度

Question

我正在尝试在跨越全宽的父div之外扩展三个具有固定高度的div。但我希望它们扩展到父母的高度之外，而不是宽度。

与下图类似：

最好的方法是什么？

以下是它的基本HTML。

<div class="background">
    <div class="container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
     </div>
</div>

Answer 1

这是一种方法。

将transform: scaleY(1.2)应用于.container元素，并通过将transform: scaleY(0.8)添加到子元素来替换缩放。

Example Here

.background {
    background: #000;
    height: 100px;
    margin: 1em 0;
}
.container {
    transform: scaleY(1.2);
    height: inherit;
}
.container > div {
    width: 28%;
    height: 100%;
    background: #f88;
    margin: 0 2.6666667%;
    float: left;
    text-align: center;
    font-size: 4em;
    line-height: 100px;
    color: #fff;
}
.container > div > .inner {
    transform: scaleY(0.8);
}

<div class="background">
    <div class="container">
        <div class="one">
            <div class="inner">1</div>
        </div>
        <div class="two">
            <div class="inner">2</div>
        </div>
        <div class="three">
            <div class="inner">3</div>
        </div>
    </div>
</div>

Answer 2

如果我理解你的正确要求，你可以做一些事情：

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