title: Show box-shadow outside of overflow area
body: <p>I have a few boxes inside a container. The container is set to <code>overflow: hidden</code> to make sure everything stays in its place. Taking away <code>overflow: hidden</code> is not an option because doing so allows content to overflow where it would otherwise resize to fit the container.</p>
  <p>I'm trying to give the boxes a <code>box-shadow</code>, but when doing so, the shadows on the edge of the boxes at the edge of the container are not showing up (see image below), because the parent container stops there and has no overflow.</p>
  
  <p><a href="https://i.stack.imgur.com/66om8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/66om8.png" alt="A cropped image showing a portion of four boxes within a container  each with a box-shadow: two at left; two at right." /></a></p>
  
  <p><em>As indicated by the green arrows, the two boxes at left show their shadows as expected. As indicated by the red arrows, the two boxes at right have their shadows cropped at the right edge where each meets the container.</em></p>
  
  
  <h3>Is there any way to hack around this?</h3>
  <p><strong>A simple reproduction:</strong><br />
  <em>Note: This code snippet was added by a community editor, not the author, as an attempt to reproduce the symptoms. It does not reflect the actual code used by the author to produce the attached image.</em></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
    row-gap: 1rem;
  }
  
  .shadow {
    display: inline-block;
    height: 2rem;
    background-color: tomato;
    box-shadow: 0 0 0.25rem black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="shadow"&gt;&lt;/div&gt;
    &lt;div class="shadow"&gt;&lt;/div&gt;
    &lt;div class="shadow"&gt;&lt;/div&gt;
    &lt;div class="shadow"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>