title: How can I have visible vertical overflow in a horizontally scrollable table?
body: <p>I am trying to implement a table that is horizontally scrollable (using React), in each row there is a dropdown component. This component is custom and doesn't use the <code>&lt;select&gt;</code> tag. I have noticed that at the bottom of the table, when I open the input the options are hidden since the table has <code>overflow-x: scroll</code>. This isn't an issue if I use a <code>&lt;select&gt;</code> tag however I would need to rebuild our custom dropdown and all it's functionality. A demo is available here: <a href="https://codesandbox.io/embed/frosty-moon-pz0y3" rel="noreferrer">https://codesandbox.io/embed/frosty-moon-pz0y3</a></p>
  
  <p>You will note that the first column doesn't show the options unless you scroll in the table and the second column does show the options as required. My question is how do I allow the first column to overflow while maintaining <code>overflow-x: scroll</code> on the table as a whole.</p>
  
  <p>The code is as follows:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import ReactDOM from "react-dom";
  import Select from "react-select";
  
  import "./styles.css";
  
  function App() {
    const options = [
      {
        value: "Volvo", label: "Volvo"
      },
      {
        value: "Saab", label: "Saab"
      },
      {
        value: "Merc", label: "Merc"
      },
      {
        value: "BMW", label: "BMW"
      }
    ];
  
    return (
      &lt;div className="App"&gt;
        &lt;div className="table-wrapper"&gt;
          &lt;table&gt;
            &lt;thead&gt;
              &lt;th&gt;Col1&lt;/th&gt;
              &lt;th&gt;Col2&lt;/th&gt;
              &lt;th&gt;Col3&lt;/th&gt;
            &lt;/thead&gt;
  
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;Select options={options} value="Volvo" className="Select"/&gt;
                &lt;/td&gt;
                &lt;td&gt;
                  &lt;select&gt;
                    &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
                    &lt;option value="saab"&gt;Saab&lt;/option&gt;
                    &lt;option value="mercedes"&gt;Mercedes&lt;/option&gt;
                    &lt;option value="audi"&gt;Audi&lt;/option&gt;
                  &lt;/select&gt;
                &lt;/td&gt;
                &lt;td&gt;ABCDEF&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.App {
    font-family: sans-serif;
    text-align: center;
  }
  
  .table-wrapper {
    max-width: 120px;
    max-height: 60px;
    border: 1px solid red;
    overflow-x: scroll;
  }
  
  .Select {
    min-width: 60px;
  }
  </code></pre>