設置元素的寬度其祖父的百分比

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