[CSS, React] overflow: autoの中でセレクトを開くとドロップリストが隠れてしまう

Question

開発環境

• react(17.0.2)
• react-select(5.2.1)

前提

overflow: auto を利用して配列のリスト（＝cards）を表示し、cardの中にはセレクトがあります。
cardsは追加できる仕様を想定しております。

import { useState } from "react";
import Select from "react-select";

const INITIAL_CARDS = [...Array(10).keys()].map((idx) => {
  return {
    id: idx,
    name: `名前-${idx}`,
    email: `12-${idx}@example.com`
  };
});

export default function App() {
  const [cards, setCards] = useState(INITIAL_CARDS);

  const options = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },
    { value: "banana", label: "Banana" },
    { value: "jam", label: "Jam" },
    { value: "berry", label: "Berry" },
    { value: "melon", label: "Melon" }
  ];

  return (
    <div
      style={{ height: 400, overflow: "auto", border: "2px solid", padding: 5 }}
    >
      {cards.map((card) => (
        <div style={{ padding: 10, border: "1px solid blue" }}>
          <p>ID: {card.id}</p>
          <p>Name: {card.name}</p>
          <p>Email: {card.email}</p>
          <Select options={options} />
        </div>
      ))}
    </div>
  );
}

実現したいこと

現状、画像①のように一番下のcardのセレクトをクリックするとドロップリストが隠れてしまいます。

画像①

こちらを画像②のようにセレクトを開き、領域が伸びた分、スクロールされる？ようにしたいと考えています。
どのような方法が考えられますでしょうか？
アドバイスいただけると幸いです。

画像②