Scroll area

<CfScrollArea bordered :max-height="200" :max-width="420">
<ul>
  <li v-for="i in 30" :key="i">Item {{ i }} — Lorem ipsum...</li>
</ul>
</CfScrollArea>

<CfScrollArea bordered maxHeight={200} maxWidth={420}>
<ul>
  {Array.from({ length: 30 }).map((_, i) => (
    <li key={i}>Item {i + 1} — Lorem ipsum...</li>
  ))}
</ul>
</CfScrollArea>

<CfScrollArea bordered axis="x" :max-width="420">
<div style="display: flex; gap: 6px; white-space: nowrap;">
  <span v-for="t in tags" :key="t">{{ t }}</span>
</div>
</CfScrollArea>

<CfScrollArea bordered axis="x" maxWidth={420}>
<div style={{ display: 'flex', gap: 6, whiteSpace: 'nowrap' }}>
  {tags.map((t) => <span key={t}>{t}</span>)}
</div>
</CfScrollArea>

<CfScrollArea bordered axis="both" :max-width="420" :max-height="200">
<div>{/* 18 × 12 grid */}</div>
</CfScrollArea>

<CfScrollArea bordered axis="both" maxWidth={420} maxHeight={200}>
<div>{/* 18 × 12 grid */}</div>
</CfScrollArea>