[React]grommetのcardとtableの違いがわからない

Question

前提・実現したいこと

grommetを使ってコンポーネントを作っています。
その際に溢れたcardをスクロールをしたいのですが、うまく行きません。
一方でtableを使うとうまくスクロールすることができます。
どのような違いがあるのでしょうか。
わかる方がいましたら、コメントお願いします。

####参考
https://v2.grommet.io/

発生している問題・エラーメッセージ

スクロールが効かない

該当のソースコード

<Box xflex={true} fill >
            <Box flex={true} overflow={'scroll'} >
              // スクロールできない
              <Card height="300px" background="gray"> sample</Card>
              <Card height="300px" background="gray"> sample</Card>
              <Card height="300px" background="gray"> sample</Card>
              <Card height="300px" background="gray"> sample</Card>
              <Card height="300px" background="gray"> sample</Card>

　　　　　　　　// スクロールできる
              {/* <Table caption='Simple Table'>
                <TableBody>
                  {DATA.map(datum => (
                    <TableRow key={datum.id}>
                      {COLUMNS.map(c => (
                        <TableCell key={c.property} scope={c.dataScope} align={c.align}>
                          <Text>
                            {c.format ? c.format(datum) : datum[c.property]}
                          </Text>
                        </TableCell>
                      ))}
                    </TableRow>
                  ))}
                </TableBody>
              </Table> */}
            </Box>
          </Box>