Почему компонент карусели не учитывает max-h-full? ⇐ CSS

[Anonymous]

У меня есть компонент карусели:

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

import * as React from "react"

import { Card, CardContent } from "@/components/ui/card"
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
type CarouselApi,
} from "@/components/ui/carousel"

export default function MainPageCarousel() {
const [api, setApi] = React.useState()
const [current, setCurrent] = React.useState(0)
const [count, setCount] = React.useState(0)

React.useEffect(() => {
if (!api) {
return
}

setCount(api.scrollSnapList().length)
setCurrent(api.selectedScrollSnap() + 1)

api.on("select", () => {
setCurrent(api.selectedScrollSnap() + 1)
})
}, [api])

return (



{Array.from({ length: 5 }).map((_, index) => (



{index + 1}



))}





Slide {current} of {count}


)
}

Карусель размещается внутри , высота которого составляет 300 пикселей.
Я специально установил высоту на 500 пикселей для тестирования:

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

Затем я добавил max-h-full в элемент div, который охватывает всю карусель:

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

Так почему же карусель по-прежнему имеет размер 500 пикселей, а не 300 пикселей? Даже если я добавил max-h-full в , это будет 500 пикселей, а не 300 пикселей.
Почему?

Подробнее здесь: https://stackoverflow.com/questions/798 ... max-h-full