How to Configure Strict CSS Anchor-Size Function in Google Chrome

Creating floating contextual dropdown menus, autocompletion lists, and tooltips that match the exact width or height of their reference trigger elements historically required writing complex JavaScript resize observers and inline styles. Within Google Chrome, the modern CSS Anchor Positioning specification introduces the anchor-size() function. This property enables web authors to dynamically tether an anchored element dimensions—including width, height, min-width, and max-height—directly to the geometry of its anchor element entirely in CSS.

Syntax and Dimension References

The anchor-size() function accepts an optional anchor identifier and an explicit dimension axis parameter:

• anchor-size(width): Resolves to the physical width of the default anchor associated via position-anchor.
• anchor-size(height): Resolves to the physical height of the default anchor.
• anchor-size(inline) or anchor-size(block): Resolves to the logical inline or block dimension of the anchor based on writing mode.
• anchor-size(--custom-anchor width, 200px): Targets an explicit named anchor with an optional fallback length if the anchor cannot be resolved.

Configuring Strict Anchor-Size Stylesheets

To style a search suggestions flyout whose width strictly matches the input search box while preventing awkward horizontal wrapping:

/* Anchor reference search input */
.search-form-input {
  anchor-name: --search-input-anchor;
  width: 100%;
  max-width: 480px;
  padding: 10px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

/* Tethered autocompletion dropdown */
.search-autocomplete-dropdown {
  position: fixed;
  position-anchor: --search-input-anchor;
  top: anchor(bottom);
  left: anchor(start);
  
  /* Strictly tracks anchor width */
  width: anchor-size(width);
  max-height: 320px;
  overflow-y: auto;
  
  margin-top: 4px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

As the user resizes the browser window or the search box responds to fluid responsive breakpoints, the dropdown menu automatically expands or contracts to match the anchor width with sub-pixel precision.

Using Anchor-Size Inside Mathematical Expressions

Because anchor-size() resolves to a CSS <length>, it integrates seamlessly into calc(), min(), max(), and clamp() expressions:

/* Dropdown with minimum baseline width */
.contextual-action-menu {
  position: fixed;
  position-anchor: --menu-trigger;
  top: anchor(bottom);
  left: anchor(start);
  min-width: max(180px, anchor-size(width));
}

Auditing and Debugging in Chrome DevTools

Google Chrome provides specialized DevTools tooling to audit anchor-size() relationships:

1. Open DevTools (F12) and select the Elements panel.
2. Select the anchored element in the DOM tree.
3. In the Computed styles tab, inspect width or min-width. DevTools displays the evaluated pixel value derived from the anchor box.
4. In the Styles panel, click the anchor badge to highlight the reference element and verify geometric dimensions in real time.