Bootstrap 5 vertical scrollbar in column

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="https://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