Почему добавление роста: 100% приводит к сокращению ребенка, но удаление его заставляет ребенка расти, чтобы заполнить п ⇐ CSS

[Anonymous]

У меня есть серия карт в гибкой ряду. Некоторые карты имеют более длинные названия и, следовательно, имеют большую высоту. Если я применяю высоту 100% ко всем картам (используя H-Full Class), меньшие карты остаются небольшими. Если я заберу этот класс, меньшие карты становятся на 100% от роста родительского контейнера, например, Высота самой высокой карты.
Вы можете увидеть демонстрацию здесь: https://codesandbox.io/p/sandbox/wonder ... code][list]
[*]...
[/list]
< /code>


const { useState } = React;

const DifficultyTypes = {
Beginner: "Beginner",
Intermediate: "Intermediate",
Advanced: "Advanced",
}

const sessions = [{"id":"1","title":"Morning Meditation","instructor":"Sarah Johnson","date":"2023-07-15","time":"08:00 AM","duration":30,"difficultyLevel":"Beginner","description":"Start your day with a calming meditation session focused on mindfulness and presence."},{"id":"2","title":"Breathwork for Stress Relief waeghkfvslfhrfhrfg","instructor":"Michael Chen","date":"2023-07-16","time":"12:30 PM","duration":45,"difficultyLevel":"Intermediate","description":"Learn powerful breathing techniques to reduce stress and increase energy levels."},{"id":"3","title":"Advanced Visualization","instructor":"Emma Rodriguez","date":"2023-07-17","time":"05:00 PM","duration":60,"difficultyLevel":"Advanced","description":"Deepen your practice with advanced visualization techniques for personal growth."},{"id":"4","title":"Mindful Movement","instructor":"Sarah Johnson","date":"2023-07-18","time":"10:00 AM","duration":45,"difficultyLevel":"Beginner","description":"Combine gentle movement with mindfulness for an embodied meditation experience."},{"id":"5","title":"Focus and Confkor;gcentration","instructor":"David Kim","date":"2023-07-19","time":"02:00 PM","duration":30,"difficultyLevel":"Intermediate","description":"Strengthen your attention and focus with specialized concentration techniques."},{"id":"6","title":"Deep Relaxation","instructor":"Lisa Patel","date":"2023-07-20","time":"07:30 PM","duration":60,"difficultyLevel":"Beginner","description":"End your day with a deeply relaxing guided meditation for better sleep."},{"id":"7","title":"Mindfulness for Anxiety","instructor":"Michael Chen","date":"2023-07-21","time":"11:00 AM","duration":45,"difficultyLevel":"Intermediate","description":"Learn specific mindfulness practices designed to reduce anxiety and worry."},{"id":"8","title":"Transcendental Meditah;fher;ghj;rgtion","instructor":"Emma Rodriguez","date":"2023-07-22","time":"06:00 AM","duration":60,"difficultyLevel":"Advanced","description":"Experience the profound benefits of transcendental meditation techniques."}];

const Card = ({ session }) => {
return (
[*]
{session.title}
{session.instructor}
{session.difficultyLevel}

{session.date}
{session.time}

);
};

function App() {
const [sessionData, setSessionData] = useState(sessions);
const [inputValue, setInputValue] = useState("");

const handleSearch = (e) => {
e.preventDefault();
const filteredSessions = sessions.filter((session) =>
session.title.toLowerCase().includes(inputValue.toLowerCase())
);
setSessionData(filteredSessions);
};

const handleChangeInput = (e) => {
const searchValue = e.target.value;
setInputValue(searchValue);
};

const handleSelectFilter = (e) => {
const filterValue = e.target.value;
console.log(filterValue, typeof filterValue);
const filteredSessions = sessions.filter(
(session) =>
session.difficultyLevel.toLowerCase() === filterValue.toLowerCase()
);
setSessionData(filteredSessions);
};

return (

Mindfulness Sessions




Search





Select your option


{DifficultyTypes.Beginner}


{DifficultyTypes.Intermediate}


{DifficultyTypes.Advanced}

• {sessionData.map((session) => {
  return ;
  })}

);
}

ReactDOM
.createRoot(root)
.render();< /code>
.as-console-wrapper {
display: none !important;
}< /code>






@theme {
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}

:root {
--background: #ffffff;
--foreground: #171717;
}

@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}

body {
color: var(--foreground);
background: var(--background);
font-family: var(--font-sans), Arial, Helvetica, sans-serif;
}



< /code>
< /div>
< /div>
< /p>
Стили применяются в компоненте Card.tsx. В настоящее время у меня применяется h-full [/code], и карты имеют различные высоты. Удалите это, и карты - все равномерно. < /P>
Я хочу понять, почему это происходит? Интуитивно, я ожидаю высоты: 100%, чтобы заполнить доступную высоту. Я не понимаю, почему это вместо этого заставит его сжиматься.


Подробнее здесь: https://stackoverflow.com/questions/794 ... causes-chi