title: CSS Grid and Overflow
body: <p>Imagine the simplest possible CSS Grid layout of a 2-column page with both pages taking exactly 50% of the view-width.  I have elements laid out in this manner, but I also have some tooltips which are positioned absolute on elements on my page.  These tooltips are overflowing the content and cause the CSS grid to have a horizontal scrollbar, up to the full width of the tooltips.</p>
  
  <p>The overflow-x property of each panel seems to default to scroll, as I mentioned.  It is possible to set it to "hidden" as well which truncates the tooltips when they cross over onto the other panel.</p>
  
  <p>However, it does not seem possible to set overflow: visible.  Is it possible to have a CSS grid column layout but also support position: absolute elements which can "cross over" onto the other side of the grid?</p>
  
  <p>EDIT:
  <a href="https://codepen.io/AngryPidgeon/pen/eQVMgL" rel="nofollow noreferrer">https://codepen.io/AngryPidgeon/pen/eQVMgL</a>
  I figured out that setting "overflow-y: scroll" is part of the problem.  When this is not set, the tooltip appears overlaid on the right panel as expected.  When overflow-y: scroll is set, the left panel then also scrolls horizontally and will not allow the tooltip to appear overlaid on the right panel no matter what.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.grid {
    display: grid;
    grid-template-areas: 'left right';
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100vh;
  }
  
  .left {
    background-color: beige;
    grid-area: left;
    overflow-y: scroll;
  }
  .right {
    background-color: khaki;
    grid-area: right;
  }
  
  .tooltip-wrapper {
    position: relative;
  }
  
  .tooltip {
    background-color: white;
    position: absolute;
    top: 105%;
    left: 105%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='grid'&gt;
    &lt;div class='left'&gt;
      &lt;div class='tooltip-wrapper'&gt;
        &lt;p&gt;Content and text and stufdf&lt;/p&gt;
        &lt;p class='tooltip'&gt;Tooltip text&lt;/p&gt;
      &lt;/div&gt;
      &lt;p&gt;left content&lt;/p&gt;
      &lt;p&gt;Lorem ipsum&lt;/p&gt;
      &lt;p&gt;Lorem&lt;/p&gt;
      &lt;p&gt;left content&lt;/p&gt;
      &lt;p&gt;Lorem ipsum&lt;/p&gt;
      &lt;p&gt;Lorem&lt;/p&gt;
      &lt;p&gt;left content&lt;/p&gt;
      &lt;p&gt;Lorem ipsum&lt;/p&gt;
      &lt;p&gt;Lorem&lt;/p&gt;
      &lt;p&gt;left content&lt;/p&gt;
      &lt;p&gt;Lorem ipsum&lt;/p&gt;
      &lt;p&gt;Lorem&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class='right'&gt;
      &lt;p&gt;More Content&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>