How can I force custom cards to fill 100% of horizontal-stack height?

Configuration Frontend
1

Hi, I have some cards in a default Masonry view that currently look like this (simplified for demonstration):
image

Here is the code:

type: horizontal-stack
cards:
  - type: button
  - type: button
    name: test
  - type: custom:button-card
    name: 'lorum ipsum'
  - type: custom:button-card
    name: 'lorum<br/>ipsum'
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:button-card
        name: test1
      - type: custom:button-card
        name: test2

The built-in cards, such as button, thermostat, etc. will all natively fill the entire height of the horizontal-stack rows, as demonstrated by the two button cards with differing contents. However the custom cards custom:button-card and custom:vertical-stack-in-card (and perhaps others) will not do this. I’ve been struggling to find a way to make their height behave similar to the built-in cards, such that they fill all the available height in the row.

I feel like there should be an easy way to do it without getting super granular with grids, but I’ve tried many combinations of css styles such as height:, display:, etc. and am failing to achieve this.

Could anyone recommend a solution? Thanks in advance.

2

P.S. Here’s the same, with an additional thermostat card added to exaggerate and demonstrate the issue a little more clearly.

image

type: horizontal-stack
cards:
  - type: button
  - type: button
    name: test
  - type: thermostat
    entity: climate.living_room_thermostat
  - type: custom:button-card
    name: lorum ipsum
  - type: custom:button-card
    name: lorum<br/>ipsum
  - type: custom:vertical-stack-in-card
    cards:
      - type: custom:button-card
        name: test1
      - type: custom:button-card
        name: test2
3

I finally figured out card_mod, which solved my problem:

image

type: horizontal-stack
cards:
  - type: button
  - type: button
    name: test
  - type: thermostat
    entity: climate.living_room_thermostat
  - type: custom:button-card
    name: lorum ipsum
    card_mod:
      style: |
        ha-card {
          height: 100%
        }
  - type: custom:button-card
    name: lorum<br/>ipsum
    card_mod:
      style: |
        ha-card {
          height: 100%
        }
  - type: custom:vertical-stack-in-card
    card_mod:
      style: |
        ha-card {
          height: 100%
        }
    cards:
      - type: custom:button-card
        name: test1
      - type: custom:button-card
        name: test2
1 Like
4

The card also has a styles section, so you can do that without using card_mod.