I am struggling to make the orange divs in this example stretch out to match the height of the enclosing td element without explicitly setting the parent's height. I have tried using display: flex and align-items: stretch, but I can't seem to achieve the desired design. It seems like a simple task, but it requires a deep understanding of the CSS model that I unfortunately lack.
https://i.sstatic.net/rpIML.png
td {
background-color: aliceblue;
}<table style="width: 800px;position: absolute;">
<tbody>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td rowspan="3">normal text in a td is using 100% height.</td>
<td rowspan="3" style="height: 100%">
<div style="background-color: orange;">a div with colspan inside a td is not using 100% height.</div>
</td>
</tr>
<tr>
<td>cell a</td>
<td>cell b</td>
<td>cell c</td>
</tr>
<tr>
<td>cell x</td>
<td>
<div style="background-color: orange;">a div inside a td is not using 100% height.</div>
</td>
<td>
<div style="width: 100px; height: 100px; background-color: lightgreen; padding: 8px">a large cell</div>
</td>
</tr>
</tbody>
</table>