CODEWITHSUNDEEP
css
smilefreak24
smilefreak24

Reputation: 1381

Expand child elements height outside parents

I am trying to expand three divs with fixed heights outside of a parent div that spans full-width. But I want them to expand outside the parent's height, not width.

Similar to the picture below:

enter image description here

What would be the best way to do this?

Here is the basic HTML for it.

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

Upvotes: 1

Views: 468

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 240928

Here is one approach.

Apply transform: scaleY(1.2) to the .container element, and displace the scaling by adding transform: scaleY(0.8) to the children elements.

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>

Upvotes: 3

Avi Mosseri
Avi Mosseri

Reputation: 1368

if I understand what you are asking correctly, you can just do something as to: 

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

Upvotes: 0

Related Questions