[grommet]box内のscrollが効かない

Question

前提・実現したいこと

grommetを使っているのですが、box内のscrollが効かなくて困っています。
今のままだと自動的にcardの高さが調節されてしまいます。
どのようにすればカードの高さを維持したまま、はみ出したものはscrollで閲覧できるでしょうか。

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

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

box内のscrollが効かない

該当のソースコード

<Box overflow={'scroll'} fill>
              <Card height="300px" background="brand"> sample</Card>
              <Card height="300px" background="brand"> sample</Card>
              <Card height="300px" background="brand"> sample</Card>
              <Card height="300px" background="brand"> sample</Card>
              <Card height="300px" background="brand"> sample</Card>
              <Card height="300px" background="brand"> sample</Card>
              <Card height="300px" background="brand"> sample</Card>
</Box>

 <Box xflex={true} fill >
            <Box flex={true} overflow={'scroll'} >
              // スクロールできない
              <Card height="300px" background="brand"> sample</Card>
              <Card height="300px" background="brand"> sample</Card>
              <Card height="300px" background="brand"> 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>

Answer 1

（grommetについてはあまり詳しくないですが）

const App = props => (
    <Box overflow={'scroll'} height='500px'>
      <Card height="300px" flex='false' background="brand"> sample</Card>
      <Card height="300px" flex='false' background="brand"> sample</Card>
      <Card height="300px" flex='false' background="brand"> sample</Card>
    </Box>
);

render(<App />);

すれば解決すると思います。

Comments

[aiai8976]

試してみましたが、変わらなかったです。
tableだとうまくスクロールできるのですが、cardだとうまく行きません。
追記していますので、確認お願いします。

[Itta]

最初のコードからjavascriptコンソールで
display: flex;をはずして、
height: を500pxくらいにしたところ、
うまくいきました。

[aiai8976]

具体的にコードを載せてもらってもいいでしょうか。

[Itta]

回答の方に追加しておきました！