How to force a scroll inside a grid cell?

Question

How can I achieve :

• left cell height not fixed, I just want this cell height computed with "grid-template-rows : auto"
• right cell having same height than left cell
• right cell shows a vertical scroll to show the full list
• you can do whatever you want inside the right cell to achieve this

Sorry shame on me I haven't translated this in vanilla css.

You can find this exact pattern at OpenSea analytics page, check "Owners" cell for example, its height is the same than "Owner distribution".

export default function Dashh() {
  return (
    <div
      className="grid grid-cols-2 grid-rows-1"
      style={{ gridTemplateRows: "auto auto auto auto" }}
    >
      <div className="grid-item border text-red-500">
        <div>a</div>
        <div>a</div>
      </div>
      <div className="grid-item border text-red-500">
        <div className="overflow-auto">
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
        </div>
      </div>
    </div>
  );
}