The issue with this solution is that it makes every wrapper narrower, even when the button isn't part of a group. Check the attached screen recording, I was switchging between 100% and 100%-1px.

Maybe you could try wrap the content somehow like this:

<div class="wrapper>
  <div class="content">...</div>
  <div class="divider">...</div>
</div>

But honestly, I don't think it's an issue if the button group isn't shrinkable.

The issue with it not compressing is more just the different behaviour between button groups and buttons.

For now we have just added this to our css, so that neither shrink:

    vscode-button,
    vscode-button-group {
      flex-shrink: 0;
    }

One option could be add a new variable, like we do with --divier-diplsay but for the wrapper width.

    ::slotted(vscode-button:not(:last-child)) {
      --divider-display: block;
      --wrapper-width: calc(100%-1px);
      //...
    }

Then, we could just use that, keeping it as 100% for the standard buttons, but then specifying the specific width when the wrapper is shown.

    .wrapper {
      //...
      width: var(--wrapper-width, 100%);
      //...
    }

LGTM. Thanks!