Flex-Wrap не реализуется должным образом ⇐ CSS

[Anonymous]

Я хочу, чтобы тег h4 моей карты, то есть кухни, был обернут, чтобы он не переполнялся за пределы контейнера. Я применил каждое свойство, но не достиг своей цели. Ниже мой код

.card{ ширина: 300 пикселей; дисплей: гибкий; flex-wrap: обертка; гибкое направление: столбец; радиус границы: 5 пикселей; box-shadow: -1px 4px 20px 14px rgba(0, 0, 0, 0.2); отступ: 10 пикселей; поле: 20 пикселей; курсор: указатель; высота: 350 пикселей; } .card > img{ ширина: 100%; радиус границы: 10 пикселей; } .card > h4{ дисплей: гибкий; ширина: 300 пикселей; flex-wrap: обертка; /*перенос текста: перенос;*/ пробелы: нормально; } .card > диапазон{ дисплей: гибкий; оправдание-содержание: равномерно по пространству; } Вверху — CSS, который я использовал, а ниже — код реакции

return( {имя {/* */} {кухни {areaName = 4.2 ? "зеленый" : "красный" }}> {avgRatingString {lastMileTravel {costForTwo Я хочу, чтобы тег кухни правильно переносился прямо сейчас, когда он переполняет родительский элемент div.