Example

Many times we want an element to be larger than the max width of its parent.

Imagine this code:

<main class="limited-width">
	<div class="full-width">
		<img />
	</div>
</main>

With the following CSS for the parent:

.limited-width {
	width: 500px;
}

Solution

However, we want our full-width element to be 100% of the whole view port. This is a simple hack to make that happen:

.full-width {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

This trick is originally from this source.