如何阻止這個div的寬度減少？

我在div的內部有一個HTML table。我希望div的寬度能夠動態減少，而不需要任何內容被包裹，也不會增加高度。相反，我只想有一個水平滾動條，並且沒有垂直滾動條。如何阻止這個div的寬度減少？

Here is my JSFiddle demo（請不要介意凌亂的HTML - 它是使用ASP .NET MVC Razor生成的）。

你可以看到我的CSS，我試圖在外部div上使用overflow-x: scroll，但它並沒有完全做到這一點。

請讓我知道如何阻止div的內容調整大小。謝謝。

編輯：div內的table的內容是動態的，所以硬編碼寬度在這裏不起作用。

看起來像亞當誰提供了錯誤的答案刪除了他的迴應，並低估了我的話題...但感謝@diegorp和Pangloss爲您的解決方案。 –

我們不知道誰投了你的問題。但我並不感到驚訝 - 所以我建議「尋求調試的問題有助於解決問題（」爲什麼這個代碼不工作？「）必須包含所需的行爲，特定的問題或錯誤以及在問題中重現**的最短代碼本身**。」您也接受了與以後發佈的解決方案完全相同的答案，這聽起來很不恰當。 – Stickers

感謝您的反饋，@Pangloss，下次我會記住這一點。並再次感謝解決方案。 –

正如你所說，你不想要的表的內容進行包裝，所以你可以使用這樣的事情：

#container table * { 
    white-space: nowrap; 
}

而且我覺得你不t需要overflow-x: scroll;您可以使用overflow-x: auto;，溢出只會在必要時出現。

2015-10-14 21:59:11 diegorp

嘗試使用此爲您的CSS：

#container { 
    max-height: 200px; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    width: 100%; 
    max-width: 350px; 
}

更改350px到任何你想。 overflow-y: hidden;行刪除垂直滾動條，max-width行設置元素寬度的上限。

2015-10-14 21:52:17

感謝您的回覆，但不幸的是我無法使用任何硬編碼的寬度值。看到我對亞當答案的迴應。 –

是的，你可以大聲笑。 –

否@AdamBuchananSmith，寬度是完全動態的，所以沒有硬編碼的值將適用於我。請參閱[Pangloss的解決方案]（http://jsfiddle.net/1gusx05v/） –

將其設置爲防止文字環繞。

#container { 
    ... 
    white-space: nowrap; 
}

2015-10-14 21:55:27 Stickers

這樣做的伎倆 - 謝謝！ –

回答