The pathetic situation of browsers today.

[porov]

I tested this code in the following browsers: IE7, IE8, Chrome, Firefox 3.5

Every browser gives a different result! The only one displaying it correctly is
chrome. This is just pathetic. Test it for yourself.

<div style="width:200px; height:200px;overflow: visible;border: solid 1px Black;">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%;height: 100%;">
<tr>
<td style="background-color:Olive;height: 20px;">
</td>
</tr>
<tr>
<td style="background-color:Orange;height: 90%;">
<div style="overflow: auto;height: 100%;">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
</td>
</tr>
<tr>
<td style="background-color:Red;height: 10%;">
s
</td>
</tr>
</table>
</div>

[rocknbil]

Does the document validate, and what doctype? I just checked via direct input [validator.w3.org] and there's nothing wrong with that chunk of code, with one exception (below.) Leads me to think something else is going on, throwing it into quirks mode.

One thing I see, and is common, height:100% is going to be unreliable at best, it's always been this way. 100% of what? The viewport? The content of the page? That's actually part of the problem, browsers interpret "100% of what" differently.

You think browsers are bad today, I still remember Netscape 1.0 and Mosaic . . . lol

A couple things that may or may not help . . .

If FF I see the div (which really shouldn't even be necessary) is sticking to 200px height, but FF is trying to follow your directions and 100% height the table, causing it to spill out of the div. The 100% height and 200px height are contradictory. In IE, it's following the height of the div and adding a scrollbar due to the visible attribute of overflow.

If you want "100%" (of the viewport, which is all you'll get) remove the height of the div. Works in IE and FF similarly.

If you're trying to restrict it to 200px high, I've no idea why you would specify 100% height on the table, but OK. change this,

<div style="width:200px; height:200px;overflow: auto;border: solid 1px Black;">

And now in both FF and IE, it stays at 200px height with the scrollbar in both. IE has a horiz. scrollbar (most likely due to the usual, box model problems in IE,) so you'll have to fiddle with padding and margins to get IE to play along.

In my testing, I also added this,

</table>
<div style="clear:both;"></div>
</div>

Which may not have any effect one way or the other on the second solution, but might on the first.

[swa66]

The 100% height and 200px height are contradictory.

Actually not: 100% height on any element should make it the same height (remember height of the content not of the element's outer dimensions!) as the direct parent if that parent has an explicitly set height different from auto.
(the div that's a parent has that.

The real problem comes further down where the rows of the table also have heights that add up to more than the ehight of the table ... which will result in the code giving conflicting instructions to the browser, and for which the browser has according to what I remember form the standard freedom of choice how to solve the problem.

Stop trying to force the elephant in the mouse trap ...