<main style="overflow: hidden; resize: both;">
  <button class="anchor-icon" popovertarget="floaty-anchor-tip" style="anchor-name: --anchor-icon-1">
    <svg width="32" height="32" viewBox="0 0 24 24">
      <path d="M12 22q-1.525 0-3.125-.55t-2.9-1.5t-2.137-2.225T3 15v-2q0-.3.275-.45t.525.05l2.275 1.7q.35.275.387.738t-.287.787l-.725.725q.725 1.275 2.3 2.2T11 19.925V11H9q-.425 0-.712-.288T8 10t.288-.712T9 9h2V7.825q-.875-.325-1.437-1.088T9 5q0-1.25.875-2.125T12 2t2.125.875T15 5q0 .975-.562 1.738T13 7.825V9h2q.425 0 .713.288T16 10t-.288.713T15 11h-2v8.925q1.675-.25 3.25-1.175t2.3-2.2l-.725-.725q-.325-.325-.288-.787t.388-.738l2.275-1.7q.25-.2.525-.05T21 13v2q0 1.45-.838 2.725t-2.137 2.225t-2.9 1.5T12 22m0-16q.425 0 .713-.287T13 5t-.288-.712T12 4t-.712.288T11 5t.288.713T12 6"/>
    </svg>
  </button>
  <button class="anchor-icon" style="anchor-name: --anchor-icon-2">
    <svg width="32" height="32" viewBox="0 0 24 24">
      <path d="M12 22q-1.525 0-3.125-.55t-2.9-1.5t-2.137-2.225T3 15v-2q0-.3.275-.45t.525.05l2.275 1.7q.35.275.387.738t-.287.787l-.725.725q.725 1.275 2.3 2.2T11 19.925V11H9q-.425 0-.712-.288T8 10t.288-.712T9 9h2V7.825q-.875-.325-1.437-1.088T9 5q0-1.25.875-2.125T12 2t2.125.875T15 5q0 .975-.562 1.738T13 7.825V9h2q.425 0 .713.288T16 10t-.288.713T15 11h-2v8.925q1.675-.25 3.25-1.175t2.3-2.2l-.725-.725q-.325-.325-.288-.787t.388-.738l2.275-1.7q.25-.2.525-.05T21 13v2q0 1.45-.838 2.725t-2.137 2.225t-2.9 1.5T12 22m0-16q.425 0 .713-.287T13 5t-.288-.712T12 4t-.712.288T11 5t.288.713T12 6"/>
    </svg>
  </button>
</main>

<div class="floaty" popover id="floaty-anchor-tip" style="position-anchor: --anchor-icon-1">
  <p>Popover anchor with flip</p>
</div> 

<div class="floaty" style="position: absolute; position-anchor: --anchor-icon-2">
  <p>Position absolute div with flip</p>
</div> 

@import "https://unpkg.com/open-props" layer(support.design-system);
@import "https://unpkg.com/open-props/normalize.min.css" layer(support.demo);
@import "https://unpkg.com/open-props/buttons.min.css" layer(support.demo);

/* turns out, not a bug: https://issues.chromium.org/issues/360921604 */
/* blogged about it here: https://nerdy.dev/why-isnt-my-position-try-fallback-working-in-small-spaces */

.floaty {
  /* for [popover] to use inset-area */
  inset: auto;
  
  /* use positioning keywords */
  /* BUT! */
  /* this is where the bug in my code is */
  inset-area: top center;
  /* fixed by uncommenting the following */
/*   inset-area: top; */
  
  /* flip to bottom if goes off the top of the screen */
  position-try-fallbacks: flip-block;
  
  /* margin top/bottom space space from the element when flipping */
  margin-block: var(--size-2);
  
  /* prefer a flip position based on more height */
  position-try-order: most-height;
  
  /* hide when the anchor has exited the scrollport */
  position-visibility: anchors-visible;
}

















.anchor-icon {
  > svg {
    fill: currentColor;
    width: 10vmin;
    height: 10vmin;
  }
}

@layer support.demo {
  body {
    display: grid;
    place-content: center;
    padding: var(--size-5);
    gap: var(--size-5);
    
    block-size: 200vh;
  }
  
  main {
    display: flex;
    gap: 10vmin;
  }
  
  .floaty {
    background: white;
    box-shadow: var(--shadow-5);
    border-radius: var(--radius-3);
    padding-block: var(--size-5);
    padding-inline: var(--size-7);
  }
}