将div延伸到父容器之外

Question

I have a certaing layout of nested divs. One of them I would like to expand beyond its parent. However, with this nesting it's not that simple - I think.

Html:

<div class="wrapper">
    <div class="gridcontent">
        <div class="gcrow single-column">
            <div class="gccolumn">
                <div class="gccolumn-inner">
                    <div class="gcitem">
                        <p>Extend to .wrapper width</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I can't change the html, and there may be other .gcrow s that need to stay inside the container. Is this possible to to at all?

Fiddle here .

I hope my question makes sense.

Answer 1

try something like this

.gcrow {
  position: relative;
  overflow: visible;
}

.gcitem {
  position: absolute;
  right: 0;
  top: 0;
}

Answer 2

For your current HTML structure you can use .gcrow:first-child and set min-width: 100vw which is same as wrapper width if you remove default margin and padding from html, body .

You can use position: relative , left: 50% and to make it center just add transform: translateX(-50%) , here is Fiddle

 body, html { margin: 0; padding: 0; } * { box-sizing: border-box; } .wrapper { width: 100%; padding-left: 20px!important; padding-right: 20px!important; border: 1px solid pink; } .gridcontent { width: 100%; max-width: 1018px; border: 1px solid #333; margin: 0 auto; } .gcrow { max-width: 100%; width: 100%; border: 1px solid #f00; } .gcrow:first-child { min-width: 100vw; position: relative; left: 50%; transform: translateX(-50%); } 

 <div class="wrapper"> <div class="gridcontent"> <div class="gcrow single-column"> <div class="gccolumn"> <div class="gccolumn-inner"> <div class="gcitem"> <p>Extend to .wrapper width</p> </div> </div> </div> </div> <div class="gcrow single-column"> <div class="gccolumn"> <div class="gccolumn-inner"> <div class="gcitem"> <p>Leave me alone</p> </div> </div> </div> </div> </div> </div> 

Also its box-sizing: border-box not box-border