解决 Shrinkwrap：新的实验技术
In this article, I present my new technique for solving a CSS problem that was deemed impossible — true shrinkwrapping of an element with auto-wrapped content. By using anchor positioning and scroll-driven animations, we can adjust our element’s outer dimensions by measuring its inner contents, demonstrating that for many cases this can already work and might unlock a future native feature.
在这篇文章中，我介绍了一种新的技术，用于解决一个被认为不可能的 CSS 问题 — 具有自动换行内容的元素的真正 shrinkwrapping。通过 使用 anchor positioning 和 scroll-driven animations，我们 可以通过 测量其内部内容来调整元素的外部尺寸，证明在许多情况下这已经可以工作，并可能解锁未来的原生功能。
CSS is Awesome
CSS 真棒
CSS is Awesome
CSS 很棒
Toggle to a videolive example
切换到 videolive 示例
On the left: an element that wraps without shrinkwrap fix. On the right: the box is tightly wrapped with a fix and centered. Resizing the example demonstrates what the problem looks like in a dynamic context.
左边： 没有 shrinkwrap 修复的包裹元素。右边： 盒子使用 修复紧密包裹并居中。调整示例大小演示了 动态 上下文 中问题的样子。
Since anchor positioning and scroll-driven animations appeared on my radar, I knew they would unlock things that were not possible before. These new CSS features hook into many things that were previously either impossible or available only through cumbersome JavaScript APIs. Two years ago, I wrote about one of such things — the “shrinkwrap” problem and a partial decorative workaround that used anchor positioning — in my “The Shrinkwrap Problem: Possible Future Solutions” article.
自从 anchor positioning 和 scroll-driven animations 出现在我的视野中，我就知道它们将解锁以前不可能实现的事情。这些新的 CSS 功能钩入了许多以前要么不可能，要么只能通过繁琐的 JavaScript API 实现的事情。两年前，我写过其中一件事——“shrinkwrap”问题以及使用 anchor positioning 的部分装饰性变通方法——在我的 “The Shrinkwrap Problem: Possible Future Solutions” 文章中。
After writing that article, and experimenting more with scroll-driven animations, I knew that there could be a way to combine those and achieve shrinkwrapping not just visually, but also make it affect the layout. In the last few months, I was experimenting with my past findings and a few novel approaches, and, finally, honed them into something reusable — an...