css溢出滚动表格单元格宽度为:auto or width:100%

Question

我想构建具有滚动条和动态宽度的灵活布局。

我有表格宽度、高度为窗口的 100% 和具有自动宽度的 2(3) 列(宽度取决于其内容)和具有剩余宽度的中心列。我无法指定列的确切宽度。

如果我的内容大于单元格宽度和高度，我希望有水平和垂直滚动条；

示例 1

示例 2 这是LiveDemo

<div style="width:1024px">
    <table style="width:100%">
    <tr>
       <td>
           <div>Column Menu with Dynamic Content and width</div>
       </td>
       <td style="width:100%;">
           <div style="overflow:scroll;">Column Big Dynamic Content with ScrollBars</div>           
       </td>
    </tr>
   </table>
</div>

我无法使用:

1. table-layout:fixed - 因为列宽取决于其内容
2. overflow:scroll与 width,height指定
3. 我需要纯CSS解决方案

我已经尝试过:

1. width:100%, max-width:100%, min-width:100% - 不工作
2. white-space:wrap仅当内容为文本且只有垂直滚动条时才有效

问题是:如何制作div与 overflow:scroll或overflow:auto有width,height它的父容器(在我的例子中是 TD )

附注 最好的情况是如果是 <TD style="overflow:auto"></TD>宽度是自动的。

Answer 1

找到第二个解决方案(更漂亮)，它有效!

这里在 stackoverflow 上有一些解决方案说将子 div 添加到 td 并具有高度、宽度和溢出滚动，但它们都不适用于单元格的动态宽度，因此我通过添加稍微修改了解决方案 div position:absolute 并将 top,bottom,right,left 设置为 0，并添加到父容器 position:relative;

这里是Live Demo 1

    <table border="1" width="100%" height="100%">
      <tr>
        <td> <!-- left column with autowidth -->
            <div style="width:200px">Left Menu</div>
        </td>
        <td style="width:100%; position:relative;"> <!-- fill remaing width of columns -->
          <div style="position:absolute; top:0; bottom:0; left:0; right:0; overflow:auto; ">
            <div style="width:1000px; height:1000px; background:#f05555;">Calendar Mega BIG content</div>
          </div>
        </td>
         <td> <!-- right column with autowidth -->
            <div style="width:300px">Right Menu</div>
        </td>
        </tr>
    </table>

如果我们走得更远，更现代(没有 table 的生活)，就会像这样:

这里是Live Demo 2

    <ul style="width:100%; height:100%; display:table;">
        <li style="display:table-cell;"> <!-- left column with autowidth -->
            <div style="width:200px">Left Menu</div>
        </li>
        <li style="display:table-cell; width:100%; position:relative;"> <!-- fill remaing width of columns -->
          <div style="position:absolute; top:0; bottom:0; left:0; right:0; overflow:auto;">
            <div style="width:1000px; height:1000px; background:#f05555;">Calendar Mega BIG content</div>
          </div>
        </li>
         <li style="display:table-cell;"> <!-- right column with autowidth -->
            <div style="width:300px">Right Menu</div>
        </li>
    </ul>