如何在一个亲戚中定位绝对元素？

Question

我想将2个绝对元素放在一个相对的元素中。这可以通过设置外部元素的高度来完成。 但由于内容是动态的，我不能使用（或不应该）固定高度。

在Fiddle的示例1中，我使用height:500px，红色元素可以包装其他元素。

但如果我擦除height:500px，则红线不会包裹内部元素。

我错过了什么？

代码：

Scenario-1 - height:500px.
<form method="post" action="#" >
            <div style='width:100%;height:500px;border: 3px solid red;position:relative;'>
                <table>
                    <tr>
                        <td>
                            <div style='width:100px ;border: 3px solid green;position:absolute;top:0;left: 0;'>
                                1-Item<br/>
                                2-Item<br/>
                                3-Item<br/>
                                4-Item<br/>
                                5-Item<br/>

                            </div>
                        </td>
                        <td>
                            <div style='width:100px ;border: 3px solid pink;position:absolute;top:0;right:0;'>                                
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </form>  
<br/><br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>    <br/><br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>  <br/>       
Scenario-2
<form method="post" action="#" >
            <div style='width:100% ;border: 3px solid red;position:relative;'>
                <table>
                    <tr>
                        <td>
                            <div style='width:100px ;border: 3px solid green;position:absolute;top:0;left: 0;'>
                                1-Item<br/>
                                2-Item<br/>
                                3-Item<br/>
                                4-Item<br/>
                                5-Item<br/>
                                6-Item<br/>
                                7-Item<br/>
                                8-Item<br/>
                                9-Item<br/>
                                6-Item<br/>
                                7-Item<br/>
                                8-Item<br/>
                                9-Item<br/>
                                6-Item<br/>
                                7-Item<br/>
                                8-Item<br/>
                                9-Item<br/>
                                6-Item<br/>
                                7-Item<br/>
                                8-Item<br/>
                                9-Item<br/>
                            </div>
                        </td>
                        <td>
                            <div style='width:100px ;border: 3px solid pink;position:absolute;top:0;right:0;'>                                
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </form>