Реакция: вертикальная область выделения выходит за пределы области просмотра и содержит неиспользуемое пространство ⇐ CSS

[Anonymous]

Я пытаюсь реализовать вертикальную карусель с непрерывной прокруткой и двумя столбцами, используя Next.js и React-Fast-Marquee. Однако я столкнулся с двумя проблемами:
Выделение выходит за пределы области просмотра: содержимое с вертикальной прокруткой выходит за пределы контейнера, создавая нежелательное переполнение.
Большой неиспользуемое пространство внутри контейнера: внутри div много пустого пространства, что делает макет некрасивым и не таким, как мне хотелось.
Вот код моего компонента:

Код: Выделить всё

"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}

))}






);
}

Что я пробовал

• регулировка скрытого переполнения в контейнере
• ослабление w-full и h-full в области выделения и его родительском контейнере
• использование Grid-cols-2 для содержимого области выделения и по-прежнему появление пустых пространств
  < /ul>
  Ожидается поведение
• два соседних столбца с вертикальной прокруткой должны заполнять порт, в котором они находятся.
• не должно быть неиспользуемого пространства, не могу избавиться

Сейчас выглядит так:


Вдохновляющее изображение



Подробнее здесь: https://stackoverflow.com/questions/793 ... used-space