Overflow:hidden; retaining content width but hiding content: Chrome

These three SO questions didn't quite get me what I needed, interesting though the BFC layout stuff was. (One, Two, Three)

This fiddle shows the issue I'm having, only in Chrome is the hidden content still enforcing width dimensions of the div classed 'content' with a width value 开发者_如何学Goof 0px.

This layout is the basis for an Accordion style menu... which obviously isn't going to work if the enforced content dimensions are visible :P

Why is Chrome behaving this way, maybe I missed something in the BFC explanation? A solution would be awesome.

What a nasty bug!

Need to research if further, but if you know the original width of .content, then you can add the same negative margin to it: http://jsfiddle.net/kizu/cpA3V/7/ — so it would compensate the original width. And if you'll need to animate the accordion, you'll just need to animate the margin alongside the width.

Try with this

.slide {
    float:left;
    width:25px; /* width added here (same width of '.handle' ) */
}

Example : JSfiddle

If you give the .content a width of 1px, then it behaves correctly. I can't explain what's happening but you can solve this by using display: none instead of the width.