title: CSS Grid With Resizer Wonkiness (no js)
body: <p>Seriously pulling out what hair I have left on this one...</p>
  <p>TLDR : :</p>
  <p>CSS only resizer works great with multiple Grid columns except when there is little (narrow?) content in the most right column?</p>
  <p>Yeah...</p>
  <p><em>read on...</em></p>
  <br />
  <p>GOAL: To resize the middle &quot;results&quot; column using <strong>CSS</strong> only.</p>
  <p><em>All three examples are identical EXCEPT for the text in the <code>&lt;p&gt;</code>s in the middle right panels.</em></p>
  <hr />
  <p>EXAMPLE 01:</p>
  <p>Paragraphs in both right panels.</p>
  <p>Resizer works as expected...</p>
  <p><a href="https://codepen.io/dragontheory/pen/abYVwdb?editors=1100" rel="nofollow noreferrer">CodePen example 01</a></p>
  <p><a href="https://i.stack.imgur.com/KHqSi.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KHqSi.jpg" alt="CodePen example 01" /></a></p>
  <hr />
  <p>EXAMPLE 02:</p>
  <p>Removed all but one word in the <code>&lt;p&gt;</code> in middle right panel.</p>
  <p>Resizer works as expected...</p>
  <p><a href="https://codepen.io/dragontheory/pen/qBoVjxa?editors=1100" rel="nofollow noreferrer">CodePen example 02</a></p>
  <p><a href="https://i.stack.imgur.com/g6js1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g6js1.jpg" alt="CodePen example 02" /></a></p>
  <hr />
  <p>EXAMPLE 03:</p>
  <p>Removed all but one word in the <code>&lt;p&gt;</code>s in BOTH right panels.</p>
  <p><em><strong>RESIZER IS STUPID!</strong></em></p>
  <p><em>Middle panel suddenly starts resizing on both sides as if center justified!</em></p>
  <p><a href="https://codepen.io/dragontheory/pen/MWVOoQM?editors=1100" rel="nofollow noreferrer">CodePen example 03</a></p>
  <p><a href="https://i.stack.imgur.com/V3KF3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V3KF3.jpg" alt="CodePen example 03" /></a></p>
  <p><em>WHY!?!?!</em></p>
  <p><em>WHAT STRANGE OBSCURE CSS PROPERTY AM I MISSING!?!?!?!?</em></p>
  <p><em>SAVE THE LAST HAIR ON MY HEAD!!!</em> <em>PLEASE!!!</em></p>
  <p>Relevant CSS:</p>
  <pre><code>*:before, *:after, *, ::after, ::before {box-sizing: border-box;}
  
  body {
    padding: 0;
    margin: 0;
  }
  
  /* GRID ONLY FOR LAYOUT */
  
  /* PANEL WRAPPER */
  app-container {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: auto 1fr auto;
    gap: 1rem;
    padding: 1rem;
    height: 100vh;
    overflow: hidden;
  }
  
  /* ALL PANELS */
  app-panel {
    display: grid;
    border-radius: .3rem;
    overflow: hidden;
    border: solid 1px rgba(255,255,255,0.1);
    align-content: start;
  }
  
  /* HEADER/FOOTER */
  app-panel:first-of-type,
  app-panel:last-of-type {
    grid-column: 1 / -1;
    grid-auto-flow: column;
    grid-auto-columns: 1fr 1fr 1fr;
    padding: 1rem;
  }
  
  app-class {justify-self: center;}
  app-user, app-version {justify-self: end;}
  
  /* NAV */
  app-panel:nth-of-type(2) {width: max-content;}
  
  app-panel:nth-of-type(3) {
    resize: horizontal; /* the STUPID resizer */
    min-width: 20rem;
    max-width: 60vw; /* keeps resizer from going beyond edge of screen */
  }
  
  /* Just to show nothing special about &lt;p&gt;s... */
  p, h2 {
    margin: 0;
    padding: 1rem
  }
  
  </code></pre>
  <p>Relevant HTML:</p>
  <pre><code>&lt;!-- Minimal structural markup --&gt;
  
  &lt;app-container&gt;
    &lt;!-- header --&gt;
    &lt;app-panel&gt;&lt;/app-panel&gt;
    &lt;!-- nav --&gt;
    &lt;app-panel&gt;
      &lt;panel-list&gt;
        &lt;list-item&gt;&lt;/list-item&gt;
        &lt;list-item&gt;&lt;/list-item&gt;
        &lt;list-item&gt;&lt;/list-item&gt;
      &lt;/panel-list&gt;
    &lt;/app-panel&gt;
    &lt;!-- results --&gt;
    &lt;app-panel&gt;
      &lt;panel-list&gt;
        &lt;list-item&gt;&lt;/list-item&gt;
        &lt;list-item&gt;&lt;/list-item&gt;
        &lt;list-item&gt;&lt;/list-item&gt;
      &lt;/panel-list&gt;
    &lt;/app-panel&gt;
    &lt;!-- details --&gt;
    &lt;app-panel&gt;
      &lt;p&gt;&lt;/p&gt;
    &lt;/app-panel&gt;
    &lt;!-- meta --&gt;
    &lt;app-panel&gt;
      &lt;p&gt;&lt;/p&gt;
    &lt;/app-panel&gt;
    &lt;!-- footer --&gt;
    &lt;app-panel&gt;&lt;/app-panel&gt;
  &lt;/app-container&gt;
  
  </code></pre>