Reagieren: Der vertikale Auswahlrahmen läuft über das Ansichtsfenster hinaus und enthält ungenutzten Platz ⇐ CSS

[Guest]

Ich versuche, mithilfe von Next.js und React-Fast-Marquee ein kontinuierlich scrollendes vertikales Karussell mit zwei Spalten zu implementieren. Ich stehe jedoch vor zwei Problemen:
Der Laufrahmen läuft über das Ansichtsfenster hinaus: Der vertikal scrollende Inhalt geht über den Container hinaus, was zu einem unerwünschten Überlauf führt.
Groß ungenutzter Platz im Container: Es gibt erheblichen leeren Platz im Div, wodurch das Layout hässlich und nicht das ist, was ich will.
Hier ist mein Komponentencode:

Code: Select all

"use client";

import React, { useEffect, useState } from "react";
import Marquee from "react-fast-marquee";

type Category = {
id: string;
name: string;
description: string;
};

export default function WhatWeDo() {
const [categories, setCategories] = useState([]);

// Fetch categories on mount
useEffect(() => {
const fetchCategories = async () => {
try {
const res = await fetch("/api/categories");
const data = await res.json();
setCategories(data);
} catch (error) {
console.error("Error fetching categories:", error);
}
};
fetchCategories();
}, []);

return (


{/* Main Grid: "What We Do" + Marquee */}

{/* Left Column - "What We Do" Section */}


What We Do


Blah blah blah:

[list]
[*]blah
[*]blah
[*]blah
[*]blah
[/list]

{/* Right Column - Vertical Marquee */}



{categories.map((item) => (

{item.name}
{item.description}

))}






);
}

Was ich versucht habe

• Overflow-hidden auf Container anpassen
• w-full und h-full in marquee und seinem übergeordneten Container schwächen
• grid-cols-2 für den marquee-Inhalt verwenden und immer noch auf leere Leerzeichen stoßen
  < /ul>
  Erwartet Verhalten
• die beiden vertikal scrollenden benachbarten Spalten sollten den Port ausfüllen, in dem sie sich befinden
• dieser ungenutzte Platz sollte nicht vorhanden sein, Ich werde es nicht los

Sehe derzeit so aus:


Inspirationsbild