CSS Stretch Container to Width of Widest Hidden Child Element

Question

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.

Answer 1

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

Answer 2

How about:

<li style="visibility: hidden; height: 0;">This is not the first list element, ok?</li>