On gists

Full Width Containers in Limited Width Parents

CSS CSS trick

demo.css Raw #

/*  https://css-tricks.com/full-width-containers-limited-width-parents/ */ 

/* With Known % Width */
main {
  width: 60%;
  margin: 0 auto;
  /* creates 20% margins on either side */
}
.full-width {
  /* 1/3 of 60% = the 20% margin on either side */
  margin-left: -33.33%;
  margin-right: -33.33%;
}


/* With Known Non-% Parent Width */
@media (min-width: 500px) {
  main {
    width: 500px;
    margin: 0 auto;
  }
  .full-width {
    margin-left: calc(-100vw / 2 + 500px / 2);
    margin-right: calc(-100vw / 2 + 500px / 2);
  }
}


@media (min-width: $max-width) {
  .full-width {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}



@supports (width: 100vw) {
  .full-width {
    width: 100vw;
  }
  @media all and (min-width: 40rem) {
    .full-width {
       transform: translateX(calc((40rem - 100vw)/2));
    }
  }
}


/* No calc() needed */
.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}


/*
tohle asi taky funguje
.my-image{
  max-width: 100vw;
  width: 100vw;
  margin: 0 calc(-50vw + 50%);
  height: 70vh;
}

*/

demo2.css Raw #

/*
  https://jsbin.com/zalijikizo/edit?html,css,output
	
	<div class="container">
		<article>clanek</article>
		<article class="full">clanek</article>
		<article>clanek</article>
	</div>

*/

.container {
	background: gray;
	height: 100vh;
	width: max(50%, 500px);
	margin: auto;
}

article {
	background: coral;
	height: 200px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

article.full {
	background: black;
	box-shadow: 0 0 0 100vmax black;
	clip-path: inset(0 -100vmax);
	color: #fff;

}