Overflow-y auto делает клип overflow-x невидимым ⇐ CSS

[Anonymous]

Я пытаюсь создать контейнер прокрутки для карточек, в котором прокрутка выполняется только по содержимому карточки, а не в верхнем или нижнем колонтитуле. Я предполагаю, что контейнер должен скрывать горизонтальное переполнение, а карта должна иметь overflow-y: auto. Однако в результате следующие карточки не будут видны.

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

function MainComponent() {
const [activeCardIndex, setActiveCardIndex] = React.useState(0);

const cardsContainerRef = React.useRef(null);
const cardsRefs = React.useRef([]);

const updateLayoutOffset = React.useCallback(() => {
if (!cardsContainerRef.current || !cardsRefs.current[activeCardIndex]) {
return 0;
}

const storyWidth = cardsRefs.current[activeCardIndex].offsetWidth;
const containerWidth = cardsContainerRef.current.offsetWidth;
let offset = containerWidth / 2 - storyWidth / 2 - activeCardIndex * storyWidth - activeCardIndex * 8;
cardsContainerRef.current.style.transform = `translateX(${offset}px)`;
}, [activeCardIndex]);

React.useLayoutEffect(() => {
updateLayoutOffset();
}, [updateLayoutOffset]);

React.useEffect(() => {
updateLayoutOffset();
}, [activeCardIndex, updateLayoutOffset]);

const goToNextCard = React.useCallback(() => {
if (activeCardIndex === cardsRefs.current.length - 1) {
return;
}

setActiveCardIndex(activeCardIndex + 1);
}, [activeCardIndex]);

const goToPreviousCard = React.useCallback(() => {
if (activeCardIndex === 0) {
return;
}

setActiveCardIndex(activeCardIndex - 1);
}, [activeCardIndex]);

let cards = ["Card 1", "Card 2", "Card 3"];

return (




Previous



Header 

{cards.map((card, index) => (
 {
if (el) {
cardsRefs.current[index] = el;
}
}}
key={index}
className="relative flex h-full min-w-full max-w-full flex-col gap-2 overflow-y-auto text-pretty rounded-md bg-white p-2 dark:bg-[#343434]"
>
{Array(40)
.fill(0)
.map((_, i) => (

{card}

))}

))}






Next




);
}

ReactDOM.createRoot(document.getElementById("root")).render();

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

Я не могу найти какую -либо комбинацию настройки переполнения, которая работает нормально.

Подробнее здесь: https://stackoverflow.com/questions/791 ... -invisible