Какие стили нужно добавить в card, чтобы каждый элемент в card занимал столько высоты сколько есть в содержимом?

Чтобы каждый элемент внутри элемента "card" занимал столько высоты, сколько есть в его содержимом, можно использовать несколько стилей.

1. Во-первых, убедитесь, что элемент "card" имеет значение свойства "display" равное "flex". Вот пример CSS-кода:

.card {
  display: flex;
}

2. Во-вторых, добавьте свойство "flex-direction" со значением "column", чтобы элементы внутри "card" располагались вертикально:

.card {
  display: flex;
  flex-direction: column;
}

3. В-третьих, установите свойство "justify-content" со значением "flex-start", чтобы элементы внутри "card" выравнивались вверху блока:

.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

4. В-четвертых, добавьте свойство "align-items" со значением "stretch", чтобы элементы внутри "card" занимали всю доступную высоту:

.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

5. И, наконец, установите свойство "height" равным "100%", чтобы элемент "card" занимал всю доступную высоту своего родительского элемента:

.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
}

В результате этих изменений каждый элемент внутри "card" будет занимать столько высоты, сколько есть в его содержимом.