Can a child influence its parent's size in Standards mode?

Take this page for example, is it possible to insert a child into mydiv such that it will cause mydiv's height to grow beyond 500px?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
    <div id="mydiv" style="width:500px;height:500px;border:4px solid red">
        <!-- place content here -->
    </div>
</body>
</html>

I can not find anything that will. For example, this situation below I have told innerDiv to be 100% in height. It will find out its parent is 500px tall, and thus also be 500px tall. The net result is the content is 800px tall, and the content spills out beyond mydiv, with mydiv still a staunch 500px tall:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
    <div id="mydiv" style="width:500px;height:500px;border:4px solid red">
        <img src="myimage.jpg" width="400" height="300" />
        <div style="width:100%;height:100%;background:yellow">
            hi
        </div>
    </div>
</body>
</html>

IE running in quirks mode will cause mydiv to grow to accomodate its children in many situations. It seems standards mode will explicitly not grow. Is that always the case?

I am testing this out primarily in IE8 and FF3.5 on Windows, with IE8 running in all its possible modes.

Solution

No: in standards mode, the default overflow property of a container should be set to visible meaning that overflowing content will be rendered outside the container's clipping area. There's no such overflow option as to grow the container's size to match its children. You can see more on overflow here

However there are methods of growing the container to match its children's size. In standards mode, the correct way of doing that is setting the CSS property min-height instead of the property height.

Since the height enforcing behavior doesn't happen in IE6, people usually end up setting both min-height for standards-compliant browsers and then either set height for IE only with conditional comments or by prefixing the property name with an underscore _ so IE6 will use it but other browsers will ignore it.

So your div would be something like

<div id="mydiv" style="width:500px;min-height:500px;_height:500px;border:4px solid red">

You can find more info on min-height here and a quick Google/Bing search for min-height IE6 will give you all the answers you need.