<header>
  <h1>Shrink Wrap</h1>
  <p>After words and flex boxes break onto new lines, the box containing them can have extra space at the end.</p>
</header>

<p class="undesirable">This shows the undesirable behavior</p>

<p class="undesirable balanced">The new text-wrap balance can make new larger gaps possible.</p>

<p class="desirable">This shows the <br>desirable behavior</p>

<div class="flex-grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

@layer demo, support;

@layer demo {
  :is(.undesirable, .desirable) {
    inline-size: max-content;
    max-inline-size: 20ch;
    
    border: 3px dotted red;
  }
  
  .balanced {
    text-wrap: balance;
  }
  
  button {
    inline-size: max-content;
    max-inline-size: 15ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .flex-grid {
    display: flex;
    inline-size: max-content;
    max-inline-size: min(100vw, 50ch);
    flex-wrap: wrap;
    gap: 5vmin;
    
    border: 3px dotted red;
    
    > .item {
      inline-size: 5rem;
      block-size: 5rem;
      background: CanvasText;
    }
  }
}

@layer support {

  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

    display: grid;
    place-content: center;
    gap: 5vmin;
  }
  
  header {
    max-inline-size: 40ch;
  }
}