将元素的宽度设置为其祖父母的百分比

Question

* 未按比例绘制

我一直试图想出一些CSS来实现我在这张照片中描绘的内容。我有一个Stage定义了可见的大小，Slider元素包含所有元素，所以你可以在元素之间滚动/滑动。 Stage中的任何溢出都将被隐藏，因此您只能看到3个元素。

我想弄清楚的是，是否有一种方法可以将Element的宽度定义为舞台的三分之一（此图片中为x / 3和x）。我无法继承Element的父级宽度，因为它会随着容器的数量而变大。

现在，我有两个问题。

1. 如何让Slider自动调整宽度而不将其设置为500%之类的值？现在，Slider是position: absolute和width: 500%，其中Stage为position relative。
2. 在不使用Javascript或硬编码值的情况下，元素可以是舞台的第3，第4或某个百分比吗？

缺乏对IE的支持是非常好的，最好不要使用JS来调整大小/计算宽度。

Demo我所拥有的。

Answer 1

将滑块的display更改为table，并将每个元素视为table-cell。
并将元素的最小和最大宽度提供给一个常量值。

Pen Here

<div class="stage">
  <div class="slider">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
  </div>
</div>

CSS：

body {
  background-color: grey;
}

.stage {
  background-color: purple;
  height: 500px;
  margin: 0 auto;
  overflow: scroll;
  position: relative;
  width: 800px;
}

.slider {
  position: relative;
  display: table;  
  border-spacing: 20px;
}

.element {
  background-color: darkcyan;
  display:table-cell;
  height: 300px;
  min-width:300px;
  max-width:300px;
}