Html 表单元格中的溢出

我需要创建一个聊天布局，使用所有可用的空间和良好的规模，但有几个固定的大小

结构如下：

<table style="width: 100%; height: 100%">
    <tr>
        <td></td>
        <td style="width: 200px; background: red;"></td>
    </tr>
    <tr>
        <td style="height: 100px; background: blue"></td>
        <td></td>
    </tr>
</table>

但是，我想在第一个表格单元格中放置大量内容，并希望它滚动，这样它就不会扩展表格

在没有固定高度的情况下，是否可以使其正确溢出？简单地添加溢出：自动似乎不起作用

---

另外，我讨厌表格，但无法想出一种非常干净的跨浏览器的方式来使用div和css进行这样的布局。如果有人能想出一个，我很乐意使用它。

实现的一个方法是使用将所有内容放入div元素并将div overflow属性设置为auto

<table style="width: 100%; height: 100%">
    <tr>
        <td>
         <div style="overflow:auto;">
              //your contain 
          </div>
        </td>
        <td style="width: 200px; background: red;"></td>
    </tr>
    <tr>
        <td style="height: 100px; background: blue"></td>
        <td></td>
    </tr>
</table>

//你的控制

如果您的内容实际上不应该出现在表中，另一种选择是使用CSS网格系统，如或Nicole Sullivan的“”

---

您可能希望将容器划分为所需的任意多个网格，这些网格更适合CSS装饰。它们更灵活，使用更简单。

在firefox和chrome上尝试过，但似乎不起作用。当我添加大量内容时，表格仍然会增长，而滚动条不会出现。为div提供宽度和高度使用高度：容器div的100%在chrome中似乎可以正常工作，但问题在firefox中仍然存在。为div使用最小高度，例如div{min height:300px；height:auto！重要；height:300px；}似乎对firefox仍然不起作用。我不能为单元格设置固定的高度，因为我希望表格能够填满所有可用的空间，无论我将其放置在何处，如果容器的大小发生变化，则可以进行适当的缩放。