忽略父最大宽度CSS

Question

I have a container on my website that keeps everything within a certain width like so..

HTML

<div class="container">
// content in here
</div>

CSS

.container{
   max-width: 1300px
}

now I have a div that I want to ignore the max-width and extend to the edges, but I don't want it to be positioned absolutely and taken out of the flow of the website so ive done this..

HTML

<div class="extend-past">
   // content here
</div>

CSS

.extend-past{
   width: 100vw;
   height: 200px;
}

so this give me the correct width but its still following the max-width of the parent container and not starting from the left edge of the window, but the edge of the parent container now I can give it a negative margin but.. because the width of window changes the negative margin wont always be correct.. how can I get around this without making it an absolute element??

Thanks

Answer 1

Child elements are left-aligned by default.

-------------
|-----      |
-------------

What you could try instead is centering it:

-------------
|   -----   |
-------------

But if an element is too big, it will stick to the left:

-------------
|-----------|---------
-------------

What you can then do, is centering it from the left (margin-left: 50%):

-------------
|     ------|--------------
-------------

If you now transform the child element's X axis 50% to the left ( x - 50 ), you get this:

    --------------
----|------------|----
    --------------

 .container { background-color: green; margin: 0 auto; max-width: 50%; padding: 10px; } .container > div { width: 80%; height: 50px; margin: 5px auto; background-color: red; } .container > div.overflow { width: 150%; } .solution .overflow { transform: translateX(-50%); margin-left: 50%; } 

 <!-- Problem situation --> Problem situation: <div class="container"> <div> Item 1 </div> <div class="overflow"> Item 2 </div> </div> <!-- Solution --> Solution: <div class="container solution"> <div> Item 1 </div> <div class="overflow"> Item 2 </div> </div>