CSS Stretch Container to Width of Widest Hidden Child Element
containers, css, html, javascript
Solution
use `visibility: hidden;` rather than `display: none;` on the hidden `li`
`visibility: hidden;` retains the elements space
`display: none;` acts as if the element doesnt exist in the markup
Problem
I have very simple example of an un-ordered list with a black border, and one of its child elements hidden: http://jsfiddle.net/spryno724/Sm9Lx/1/. Notice how the hidden child element is considerably wider than the visible element, but the container only scales to the width of the visible child. Is there a way within CSS to automatically scale the width of this container to the width of its widest child element, even if that element is hidden? I know that this is possible with JavaScript, but I would like to avoid a scripting hack and go straight CSS, if possible. Also, I'd like to avoid setting a specific width because in my actual application, my container will contain visual objects of unknown widths. Thank you for your time.