---
name: ScrollBox
menu: Atoms
---

import { Playground, Props } from 'docz';
import ScrollBox from './ScrollBox';
import { Paper } from '../../';

# ScrollBox

### Props
<Props of={ScrollBox} />

### Horizontal
<Playground>
  <ScrollBox css={{ display: 'flex', alignItems: 'center' }} x>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
  </ScrollBox>
</Playground>

### Vertical
<Playground>
  <ScrollBox css={{ display: 'flex', flexDirection: 'column', maxHeight: 400, alignItems: 'center'}} y>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
    <Paper success size={70} css={{ flexShrink: 0, margin: 10 }}/>
  </ScrollBox>
</Playground>