<div> with min-width value grows but then doesn't return to its min-width size

Despite my search on stackoverflow and google, I couldn't find a solution to my problem: I have a <div>, which contains another div within another div, so:

<div class="father" style="min-width: 800px;">
    <div class="child">  
        <div class="grandchild">  
            ...content, which can make this div grow beyond its father's and grandfather's size.开发者_开发知识库..  
        </div>  
    </div>  
</div>

Here, if the content makes its containers grow over 800 pixels, and then the content is changed to a width less than 800px , outer divs still remain oversized and don't return to their original size. Even pressing F5 or CTRL+F5 doesn't help.

Is there a way to fix this without using javascript?

Thanks in advance!

ps: Even if I used 4 spaces, the code doesn't seem to be indented, sorry for that.

Get rid of the width and set overflow:hidden to the father div

.father{overflow:hidden;}