Enabling horizontal scrollbar for table wider than div, without specifying fixed width

Question

edit: Actually this is not a problem in Firefox, but it is in Chrome.

I'm using React. I have a table that is very wide. I have a div around the table that has a width of 100%. And around everything else is another bootstrap div that has its width adjusted based on the window size.

For the inside div, I have <div style={{width:"100%", overflow:"auto"}}>. But no horizontal scrollbars appear. But if I highlight the text in the table and drag right, the table inside the div scrolls with the mouse. How do I get scrollbars to appear without specifying a fixed width and height? (I tried it with fixed width and height and it "worked", but I can't leave it like that because users may adjust the window size).

Answer 1

You can do something like this, if I understand you correctly:

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>