Make an element as wide as the grandparent

Question

I have the following markup where #content is 80% wide and contains .slide elements. I want the slides to be as wide as their grandparent (i.e. bod

Answer 1

Depending on the browser support you require, this is either pretty simple or will require some tricky CSS.

One simple version uses the vw (viewport width unit) which has decent support and requires a few simple amends to your setup:

body {
  margin: 0;
  font: medium monospace;
  background: lightgray;
}
#content {
  margin: auto;
  width: 80vw;
  background: white;
}
#content:before,
#content:after {
  content: "";
  display: table;
}
.slide {
  width: 100vw;
  height: 6em;
  margin-left: -10vw;
  background: indianred;
}

  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  
Donec mauris tellus
  
Pellentesque sit amet venenatis diam, at interdum tortor.