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

Try using this:

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

  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  

    
Phasellus euismod dolor imperdiet!
  
  
Donec mauris tellus
  
Pellentesque sit amet venenatis diam, at interdum tortor.
  

    
Quisque ornare mi in pharetra porttitor.
    
Nulla ultrices quam nec vehicula porta.