How can I force a vertical scroll?

Configuration Frontend
1

I have this code

type: custom:expander-card
title: Recitales
icon: mdi:folder-music-outline
cards:
  - type: custom:bubble-card
    card_type: button
    entity: script.metallica_1
    button_type: switch
    name: Werchter, Belgium 2022
    tap_action:
      action: call-service
      service: script.turn_on
      target:
        entity_id: script.metallica_1
  - type: custom:bubble-card
    card_type: button
    entity: script.metallica_2
    button_type: switch
    name: Nimes, France 2009
    tap_action:
      action: call-service
      service: script.turn_on
      target:
        entity_id: script.metallica_2
  - type: custom:bubble-card
    card_type: button
    entity: script.metallica_3
    button_type: switch
    name: Montreal, Canada 2023
    tap_action:
      action: call-service
      service: script.turn_on
      target:
        entity_id: script.metallica_3
  - type: custom:bubble-card
    card_type: button
    entity: script.metallica_4
    button_type: switch
    name: Woodstock 99
    tap_action:
      action: call-service
      service: script.turn_on
      target:
        entity_id: script.metallica_4
  - type: custom:bubble-card
    card_type: button
    entity: script.metallica_5
    button_type: switch
    name: Woodstock 94
    tap_action:
      action: call-service
      service: script.turn_on
      target:
        entity_id: script.metallica_5
  - type: custom:bubble-card
    card_type: button
    entity: script.metallica_6
    button_type: switch
    name: Argentina 2017
    tap_action:
      action: call-service
      service: script.turn_on
      target:
        entity_id: script.metallica_6
  - type: custom:bubble-card
    card_type: button
    entity: script.metallica_7
    button_type: switch
    name: Live Shit Binge & Purge - Seattle 1989
    tap_action:
      action: call-service
      service: script.turn_on
      target:
        entity_id: script.metallica_7
  - type: custom:bubble-card
    card_type: button
    entity: script.metallica_7
    button_type: switch
    name: Live Shit Binge & Purge - San Diego 1992
    tap_action:
      action: call-service
      service: script.turn_on
      target:
        entity_id: script.metallica_7
visibility:
  - condition: user
    users:
      - 15393e7a102249fb893bccddb80f826a

and the visual result is shown in the screenshot.

Sin título-1
Sin título-1468×528 36 KB

I would like to display 5 buttons, and then for the rest I want them to be visible by scrolling down, because if I add more it will end up being too long.

Thanks in advance

2

There’s lots of input_select cards that do a dropdown.

3

you need to set a max-height to the container card and set overflow-y: scroll

quick example, scroll the section below the table header in a markdown card:

type: markdown
uix:
  style:
    ha-markdown $: |
      ha-markdown-element table tbody {
        max-height: {{states('input_number.max_scroll_hoogte')}}px;
        overflow-y: scroll;
      }

or the complete markdown card:

      - type: markdown
        uix:
          style:  |
            ha-card {
              overflow-y: scroll;
              max-height: 700px;
            }

of course, you need to adjust for another card, but the styling is always the same, eg

  - type: grid
    uix:
      style: |
        #root {
          max-height: {{states('input_number.max_scroll_hoogte_buttons')}}px;
          overflow-y: scroll;
        }
    columns: 4

or plain entities:

      type: entities
      uix:
        style: |
          .card-content {
            max-height: 200px;
            overflow-y: scroll;
          }