Bootstrap 5 vertical scrollbar in column - html

Question

Using React and Bootstrap 5 I am trying to show a list of images either right of or below a video.
For breakpoints smaller than lg the list of images should be shown below the video stacked horizontally with a horizontal scrollbar if needed (this works). For breakpoints lg and larger the image list should be shown vertically stacked (works) and with a scrollbar if needed (this doesn't work as the full site is scrollable).
Any idea?
import React from "react";
import "./style.css";
import {Card, Container, Nav, Navbar, Row, Col} from 'react-bootstrap'
import ReactPlayer from "react-player";
export default function App() {
const n = 12;
return (
<>
<Navbar bg="light" expand="lg">
<Container fluid className="">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<Container className="d-flex flex-lg-row flex-column" fluid>
<Row className="w-100">
<Col>
<div className='player-wrapper d-flex'>
<ReactPlayer
className='react-player'
url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
width='100%'
height='100%'
/>
</div>
</Col>
<Col lg="3">
<Card className="overflow-auto h-100">
<div className="d-flex flex-row flex-lg-column">
{
[...Array(n)].map((e, i) =>
<div className="thumbnail-container flex-grow-1" key={i}>
<img className="img-fluid" src="http://i.stack.imgur.com/yKgXQ.jpg" height="300px"/>
</div>
)
}
</div>
</Card>
</Col>
</Row>
</Container>
</>
);
}
.player-wrapper {
position: relative;
padding-top: 56.25% /* Player ratio: 100 / (1280 / 720) */
}
.react-player {
position: absolute;
top: 0;
left: 0;
}
img {
min-height: 200px;
min-width: 200px;
}
Example on Stackblitz