CSS - 滾動溢出不工作

Question

我有以下的標記（見我Plunker）：

<div class="workflow-step-container"> 
    <div class="step-container"> 
     <div class="step-bubble completed">1</div> 
     <span class="divider"></span> 
    </div> 
    <div class="step-container"> 
     <div class="step-bubble completed">2</div> 
     <span class="divider"></span> 
    </div> 
    ... 
</div> 

的步驟（氣泡）的數量可以改變。我想要發生的是，如果氣泡的數量超過容器寬度，我希望氣泡容器可以水平滾動。目前，內容只是包裝。

我已經加了overflow-x: auto;，但這似乎不起作用。

在此先感謝

更新 加入white-space:nowrap;我.workflow-step-container風格之後，泡沫現在不根據需要換行。然而，在我的實際項目中，內容不斷滾動，並且不會變成可滾動的。 Here是一個屏幕截圖。我試圖在另一個div中包裝.workflow-step-container div，我在其中設置了overflow-x: hidden;，但沒有做任何事情。這是一個Plunker。

Answer 1

您可以簡單地將父元素的white-space property更改爲nowrap，以防止內聯級元素纏繞。這樣做時，內容溢出時將添加一個水平滾動條。

Updated Example

.workflow-step-container { 
    overflow-x: auto; 
    white-space: nowrap; 
} 

---

根據您的更新，您需要table-layout: fixed/width: 100%添加到嵌套祖先table元素。

問題是table元素的寬度是由.workflow-step-container元素的最大寬度決定的。添加寬度100%將強制父元素獲取其父元素的寬度，並且table-layout: fixed將更改佈局算法以支持此操作。

Updated Example

.col-xs-8 table { 
    table-layout: fixed; 
    width: 100%; 
}