Problem seems to be 'common', but among plenty of discussions I've seen I did not find nor acceptable solution nor strong reason why this not possible at all according to 'standards'.
Problem statement is
- There is block in HTML whose external dimensions I can control - both width and height
- Within this block I have first line with content of variable height, and I need this content to be visible completely (i.e. autosize without scrolling or clipping) ...
- ... and second line - it should completely take the rest of space in parent block and overflow is OK to be scrolled.
I remember it was working some time ago (when setting first TR to 1px it actually gets expanded exactly to height needed to fit the content, second TR takes the rest of height), but trying to test it now in current major browsers I see it does work only in Chrome.
So the question is - is that layout possible to be achieved within HTML5/CSS3/cross-browser standards (with or without TABLEs). As you can see on screenshot both FF and IE do not control 'correctly' (i.e. as I expect) height of the embedded DIV with 'red' background.
Below is screenshot and jsfiddle for the problem.
And sample HTML
<div style="width: 200px; height: 200px;">
<table style="height: 100%; border: 1px solid blue;">
<tr>
<td style="height: 1px; background: green; border: 1px solid magenta;">
Variable Number<br/>
Of Lines<br/>
All should be visible<br/>
</td>
</tr>
<tr>
<td style="border: 1px solid magenta;">
<div id="subject" style="height: 100%; background: red; overflow-x: hidden; overflow-y: auto">
Variable<br/>
Number<br/>
Of Lines<br/>
Overflowing <br/>
lines<br/>
Can be scrolled<br/>
...<br/>
Variable<br/>
Number<br/>
Of Lines<br/>
Overflowing <br/>
lines<br/>
Can be scrolled<br/>
...<br/>
</div>
</td>
</tr>
</table>
</div>
