Q:

CSS: give element same width as "grandparent" element

I have a supercontainer (fitting screen width, with margins and padding) , which contains a wider container, which in turn contains (sorry for the redundancy) an undetermined (DB-driven) number of left-floated boxes.   It is all part of a Backbone/Underscore template. 
I want the boxes to have the same width as the supercontainer, in order to make only one visible at a time (there's a horizontal scroller-function in the Backbone View).   I know I could use jQuery to get the supercontainer's width and apply it to boxes upon rendering, but I would definitely prefer a pure-CSS solution to avoid issues with screen resizing. 
To make things clear:
HTML:
<div id="supercontainer">
  <div id="wide-container">
    <div class="fun-box"></div>
    <div class="fun-box"></div>
    <div class="fun-box"></div>
  </div>
</div>

CSS: 
#supercontainer {
  width:100%;
  overflow:hidden;
  margin:50px;
}

#wide-container {
  display:table;
}

.fun-box {
  height:100%;
  float:left;
  width: ???; /*  something that makes it as wide as the supercontainer */
}

How can I do that? 

A:

If the #supercontainer always has 100% width of window, you can match it by applying width: 100vw for the boxes
.fun-box {
  height:100%;
  float:left;
  width: 100vw; 
}

Viewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document. 
   1vw =1/100th of the width of the viewport

-MDN

