1. Same-origin comments widget on a blog
Who: A indie blogger hosting comments at /comments.html on the same origin as posts.
Task: Stop nested scrollbars when readers add comments that grow the form.
Steps: Generate a pack with src /comments.html, class comments-frame, fallback 420, allow-origins * (same-origin is fine). Paste host CSS/iframe into the post template. Put the meta tag in comments.html head. After posting a comment, call requestResize() once the new DOM nodes are inserted.
Result: The iframe grows with new comments. Failure symptom: Meta missing → host CSS alone does nothing; readers still see an inner scrollbar.
2. Cross-origin status widget with allow-list
Who: A SaaS status team embedding https://status.vendor.example/embed on customer marketing sites.
Task: Let approved publisher origins size the widget while rejecting random sites that hotlink the embed.
Steps: On the embed origin, set meta allow-origins=https://www.customer-a.com https://docs.customer-a.com. On each customer host, paste host CSS with frame-sizing: content-height and optional max-height: 80vh. Keep sandbox attributes you already require. Test an unlisted origin to confirm sizing stays off.
Result: Approved parents get seamless height; others keep default iframe behavior. Failure symptom: Using * on a public widget → any site can trigger responsive sizing; tighten the list.
3. Docs site with a tall interactive demo and CLS budget
Who: A documentation engineer embedding a configuration demo whose panels expand.
Task: Use content height without destroying LCP/CLS on the hero.
Steps: Place the iframe below the fold. Set fallback height to the typical first-paint size (for example 560px) and add max-height: 70vh. Generate the pack, paste snippets, and call requestResize() when accordion sections open. Measure CLS before removing the reserved min-height.
Result: Demo expands smoothly without shoving the hero. Failure symptom: Iframe in the first viewport with height auto from zero → large layout shift on load.