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

Question

* 没有按比例绘制

我一直在试图想出一些CSS来实现我的这幅画描绘了我。在哪里我有一个舞台，它定义了可见的大小和一个包含所有元素的Slider元素，以便您可以在元素之间滚动/滑动。 Stage中的任何溢出都将被隐藏，因此您只能看到3个元素。

我试图弄清楚的是，如果有一种方法可以将元素的宽度定义为舞台的三分之一（此图片中的x/3和x）。我无法继承元素的父宽度，因为它的容量会更大。

现在，我有两个关于这个问题。

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; 
}