滚动容器

<div class="demo-row" style="align-items:flex-start">  <div class="scroll-area scroll-area--inset" style="width:240px;height:140px;font-size:var(--density-font-size-sm);color:var(--token-text-muted)">    <p>inset 变体：内嵌阴影 + 背景色 + 圆角边框，<strong>强烈暗示可滚动</strong>。</p>    <p>这里是一段超长内容，必须超出 140px 高度才能看到滚动条效果。</p>    <p>第二条：overscroll-behavior: contain 已开启，不会把滚动传到外层。</p>    <p>第三条：触屏使用惯性滚动（-webkit-overflow-scrolling: touch）。</p>    <p>第四条：prefers-reduced-motion: reduce 时自动关闭平滑滚动。</p>    <p>第五条：滚动条宽度随变体调整（sm 6px / 默认 8px / lg 12px）。</p>    <p>第六条：可通过 tabindex="0" 让本容器可被键盘聚焦。</p>  </div>  <div class="scroll-area scroll-area--y scroll-area--sm" style="width:160px;height:140px;padding:8px;background:var(--token-bg-soft);border-radius:var(--radius-md);font-size:var(--density-font-size-sm)">    <div style="height:280px;display:flex;flex-direction:column;gap:6px">      <div class="demo-box">条 1</div>      <div class="demo-box">条 2</div>      <div class="demo-box">条 3</div>      <div class="demo-box">条 4</div>      <div class="demo-box">条 5</div>      <div class="demo-box">条 6</div>      <div class="demo-box">条 7</div>    </div>  </div>  <div class="scroll-area scroll-area--x scroll-area--lg" style="max-width:240px;padding-bottom:8px">    <div style="display:flex;gap:8px;width:520px">      <div class="demo-box" style="flex-shrink:0">横向 A</div>      <div class="demo-box" style="flex-shrink:0">横向 B</div>      <div class="demo-box" style="flex-shrink:0">横向 C</div>      <div class="demo-box" style="flex-shrink:0">横向 D</div>      <div class="demo-box" style="flex-shrink:0">横向 E</div>    </div>  </div></div>