CSS：给出与“祖父母”元素相同宽度的元素

Question

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?

Answer 1

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

Answer 2

You can try making .fun-box a third of #wide-container 's width, and #wide-container three times #supercontainer :

#wide-container {
    width: 300%;
}
.fun-box {
    width: 33.33%;
}

Demo