CSS anchor-size() Function

The anchor-size() function allows you to size an absolutely positioned element based on the dimensions of its anchor element.

The anchor-size() function is a core feature of the CSS Anchor Positioning API. While the anchor() function is used for positioning an element relative to an anchor, anchor-size() is used for sizing it. This can be useful for UI components like dropdown menus, custom select boxes, or popovers that need to match the exact width or height of the button that triggered them.

You can use the anchor-size() function within sizing properties such as width, height, min-width, max-height, and their logical equivalents (like inline-size or block-size). It evaluates to a length value representing the specified dimension of the target anchor.

Here is an example showing a dropdown menu that uses anchor-size() to ensure it is exactly the same width as its anchor button, regardless of how wide the button gets:

/* 1. Define the anchor element */
  .dropdown-btn {
    anchor-name: --menu-anchor;
    padding: 15px 30px;
    font-size: 1.1em;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /* Giving it a specific width to demonstrate the matching size */
    width: 250px;
    text-align: left;
    display: flex;
    justify-content: space-between;
  }
  
  .dropdown-btn::after {
    content: "â–¼";
    font-size: 0.8em;
  }

/* 2. Position and size the menu relative to the anchor */
  .dropdown-menu {
    position: absolute;
    
    /* Position it directly below the button, aligned to the left edge */
    top: anchor(--menu-anchor bottom);
    left: anchor(--menu-anchor left);
    margin-top: 1px;
    
    /* SIZE IT to exactly match the width of the anchor button */
    width: anchor-size(--menu-anchor width);
    
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    font-family: sans-serif;
    padding: 0;
    margin-bottom: 0;
    list-style: none;
    
    /* Hide by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
  }
  
  .dropdown-menu li {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
  }
  
  .dropdown-menu li:last-child {
    border-bottom: none;
  }
  
  .dropdown-menu li:hover {
    background-color: #f1f1f1;
    cursor: pointer;
  }
  
  /* Show the menu on hover or focus */
  .dropdown-btn:hover + .dropdown-menu,
  .dropdown-btn:focus + .dropdown-menu,
  .dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
  }
  
  .warning-msg {
    font-family: sans-serif;
    font-size: 0.9em;
    color: #d9534f;
    margin-top: 10px;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 20px;
  }
  
  /* Hide the menu completely if anchor positioning isn't supported */
  @supports not (width: anchor-size(width)) {
    .dropdown-menu {
      display: none !important;
    }
  }
</style>

<div class="container">
  <button class="dropdown-btn">Select an Option</button>
  <ul class="dropdown-menu">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
  
  <div class="warning-msg">
    <em>Note: If you do not see a dropdown menu when hovering the button, your browser does not currently support the CSS Anchor Positioning API.</em>
  </div>
</div>

View Output Full Screen Preview

How It Works

The anchor-size() function takes two main arguments: the name of the anchor you want to reference, and the dimension (width or height) you want to measure.

For example, width: anchor-size(--my-anchor width) tells the browser to set the width of the positioned element to exactly match the width of the element named --my-anchor.

If you have linked the elements using the position-anchor property, you can omit the anchor name and simply specify the dimension, like width: anchor-size(width).

Providing a Fallback

Just like the anchor() function, you can provide an optional fallback value as the final argument. If the referenced anchor does not exist or cannot be resolved, the browser will use this fallback value instead.

For example: min-width: anchor-size(--my-anchor width, 250px).

Official Syntax

The official syntax of the anchor-size() function is as follows:

Possible Values

As indicated in the official syntax, the anchor-size() function accepts the following values:

anchor-name

An optional dashed-ident (e.g., --my-anchor) that matches the anchor-name property of the target element. If omitted, it defaults to the element specified by the position-anchor property.

anchor-size

Specifies which dimension of the anchor element to measure. Possible values include:

Physical dimensions: width, height
Logical dimensions: block, inline, self-block, self-inline

length-percentage

An optional fallback length or percentage value to use if the anchor element cannot be resolved.

CSS Specifications

The anchor-size() function is defined in CSS Anchor Positioning (Editorâ€™s Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.