Высота контента Card 100%

[Kgnx7]

Как управлять высокой компонента Card? Из-за наличия еще одного div внутри непонятно как реализовать Card с высотой X и вертикально отцентрованным контентом без привязки к внутреннему классу .vkuiCard__in. Можно ли как-то избежать погружения в детали реализации?

[SevereCloud]

Привет, вообще vkuiCard__in был удален с версии v5.4.0

Использование grid

Для решения твоей задачи очень легко использовать display: grid

.block {
  flex-grow: 1; /* если внешний блок это флекс */
  height: 100%;  /* если у внешнего блока height: 100% */

  width: 100%;
  display: grid;
}

 /* растягиваемся и центрируемся */
.content {
  ...
}

<div className="block">
  <Card>
    <div className="content">content</div>
  </Card>
</div>

Скриншот

У этого подхода есть минус - браузерная поддержка

Использование flex

Есть вариант с display: flex который слегка нарушает инкапсуляцию компонента, но нет проблем с браузерной поддержкой

.block {
  display: flex;
}

 /* stylelint-disable-next-line selector-max-universal -- растягиваем контент внутри .block */
.block > * {
  flex-grow: 1; 
}