title: How to display element over vertical bounds of parent with overflow-x: auto?
body: <p>I have a table inside a container that has <code>overflow-x: auto</code>, because this table can be scrolled horizontally. The last column of this table allows to show a context menu that should appear above the table, even when outside the bounds of the scrolling table.</p>
  <p>The problem is - I recently learned that when <code>overflow-x: auto</code> (or anything other than <code>visible</code>:</p>
  <blockquote>
  <p>If overflow-y is hidden, scroll or auto and this property is visible, it [that is, overflow-x] will implicitly compute to auto.</p>
  </blockquote>
  <p>Source: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x" rel="nofollow noreferrer">overflow-x documentation on mozilla.org</a></p>
  <p>My context menu appears clipped and I can scroll down to see it:</p>
  <p><a href="https://i.stack.imgur.com/tL6Bw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tL6Bw.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/eh8th.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eh8th.png" alt="enter image description here" /></a></p>
  <p>Is there any way to keep the context menu inside cell and make it behave as if the parent had <code>overflow-y: visible</code>?</p>
  <p>My simplified code is as follows:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;table-container&quot;&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;div class=&quot;menu-container&quot;&gt;
                      &lt;button&gt;...&lt;/button&gt;
                      &lt;nav class=&quot;menu&quot;&gt;
                          &lt;button&gt;Option A&lt;/button&gt;
                          &lt;button&gt;Option B&lt;/button&gt;
                          &lt;button&gt;Option C&lt;/button&gt;
                      &lt;/nav&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.table-container {
      max-width: 100%;
      overflow-x: auto;
  }
  
  .menu-container {
      position: relative;
  }
  
  .menu-container:not(:focus-within) .menu {
      display: none;
  }
  
  .menu {
      position: absolute;
  }
  </code></pre>