CSS white-space nowrap doesn't increase width?

I am reconstructing a dropdown menu similar to a <select> box using div's and jquery. The div containing the dropdown items should have a minimum width, but no maximum width as it should grow along with the widest item in the list (so if i have very long item like '[This is the longest item within the container]', the whole container should be as wide as this entry.

Now I almost got what I want, using white-space:nowrap for each item within the container, so that the text of an item won't continue on a new line. The problem using is the text flows out of the box using, instead of lett开发者_如何学Cing the box grow along the text. I can't figure out how to fix this problem. I already tried text-overflow:ellipsis but that appears to just hide the overflown text and adding three dots (...) at the end.

So here is my problem in a nutshell: how can I let a div grow along with the text inside of it, when white-space:nowrap is applied on it, instead of letting the text flow out of it? I don't want to hide the text using overflow:hidden, I want to show the entire string..

Thanks in advance!

Block elements' widths don't depend on their content in the normal CSS static layout model. You can get ‘shrink-to-fit’ behaviour as part of other layout properties:

• float: left
• position: absolute
• display: inline-block
• table

assuming no explicit width is set.

Is there a max-width set in any of the select's parent elements?

This would stop the white-space property from working. display: table does override a max-width if one is set however.

I had a similiar problem, it was solved by specifying the padding value in px instead of percentage.