以下の HTML を考えると、黄色のセルの最小の高さを青色のセルの高さで制限するにはどうすればよいですか? 青色のボックスの高さが外部スタイルで定義されているため、min-height を使用できません。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="width: 600px; height: 400px;">
<table style='background-color: #ccc; width: 100%; height: 100%;'>
<tr>
<td></td>
<td></td>
<td style="width: 100%; height: 100%;"></td>
<td></td>
<td id='ry' style="height: 100%; background-color: green;"></td>
</tr>
<tr>
<td></td>
<td></td>
<td id='bx' style='background-color: yellow;'>
<table style="width: 100%; height: 100%;">
<tr>
<td style='width: 33.33%; height: 100%;'>
<div style="position: relative; width: 100%; height: 100%;">
<div style="position: absolute; width: 100%; height: 100%;">
<div style=" width: 30px; height: 30px; margin-left: auto; margin-right: auto; border: 1px solid #ccc; background-color: blue;">?</div>
</div>
</div>
</td>
</tr>
</table>
</td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>