demo · v131

Sidebar Mirror

A sidebar anchors the info panel using anchor-size() in a margin property (new in Chrome 131) so the panel automatically clears the sidebar as its width changes — no JavaScript layout math needed. The panel also uses anchor-size() in an inset to stay height-matched.

Your browser does not support anchor-size() in inset and margin properties (Chrome 131+). A CSS fallback is shown.

Select an item from the sidebar.

sidebar width: —

sidebar height: —

computed margin-left: —

the code

.sidebar {
  anchor-name: --sidebar-anchor;
  width: var(--sidebar-width, 180px);
}

.info-panel {
  position: absolute;
  position-anchor: --sidebar-anchor;

  /* anchor-size() in margin — new in Chrome 131 */
  margin-left: calc(anchor-size(--sidebar-anchor width) + var(--space-3));

  /* anchor-size() in inset — new in Chrome 131 */
  top: anchor(top);

  /* match sidebar height */
  min-height: anchor-size(--sidebar-anchor height);
}

/* Fallback */
@supports not (margin-left: anchor-size(width)) {
  .info-panel {
    position: static;
    margin-left: 200px;
    margin-top: var(--space-3);
  }
}

the code

see also