html - 强制html元素不比页面宽

Question

假设您有一个复杂的结构，在一个表格单元格中包含 2 个元素。就这样:

<table>
    <tbody>
        <tr>
            <td>
                <div class="wideDiv">Here goes some very wide content</div>
                <div class="anotherDiv">This content doesn't have to be wide.</div>
            </td>
        </tr>
    </tbody>
</table>

.wideDiv 的内容可能比页面本身更宽。在这种情况下，它也强制 .anotherDiv 获得所有这些空间。我想强制 .wideDiv 不比页面本身宽(当然使用滚动)，如果我们不用表格包裹 div，它会以这种方式工作。固定大小是一个明显的解决方案，但还有其他方法吗？

这是工作示例: http://jsfiddle.net/GbEvT/2/

Answer 1

添加

.anotherDiv {
width: 100vw;
}

这是更新:http://jsfiddle.net/GbEvT/4/

它告诉 anotherDiv 占据屏幕的 100%，而不是更多。