为比 div 更宽的表格启用水平滚动条，而不指定固定宽度

Question

编辑：实际上这在 Firefox 中不是问题，但在 Chrome 中。

我正在使用 React。我有一张很宽的桌子。我在桌子周围有一个div，宽度为 100%。围绕其他所有内容的是另一个引导 div，其宽度会根据窗口大小进行调整。

对于内部div，我有<div style={{width:"100%", overflow:"auto"}}>。但是没有出现水平滚动条。但如果我突出显示表格中的文本并向右拖动，div 内的table 会随着鼠标滚动。如何在不指定固定宽度和高度的情况下显示滚动条？ （我用固定的宽度和高度尝试了它，它“工作”了，但我不能这样，因为用户可能会调整窗口大小）。

Answer 1

如果我理解正确，你可以这样做：

body {margin: 0}

#container {
  width: 100%;
  height: 50vh;
  overflow: auto;
}

#container > table {
  width: 200%;
  height: 100%;
  background: Lavender;
}

<div id="container">
  <table>
    <tr>
      <td><td>
    </tr>
  </table>
</div>