Help with Accordion CSS

Flow
1

When expanded all the heading should be in the container pushed to the end on opening.
If the content overflows the scrolling should be within the opened panel not on the container.

I have managed to get something like this only problem is last item is hidden behind the heading of the next panel.

Screenshot from 2025-07-14 17-47-35
Screenshot from 2025-07-14 17-47-35750×448 8.25 KB
Screenshot from 2025-07-14 17-48-21
Screenshot from 2025-07-14 17-48-21750×448 10.7 KB

The accordion setup is as follows,

public AccordionFixedHeight() {
		setSizeFull();
		setJustifyContentMode(JustifyContentMode.CENTER);
		setAlignItems(Alignment.CENTER);

		// Container box with border
		Div container = new Div();
		container.addClassNames(LumoUtility.Border.ALL, LumoUtility.BorderColor.PRIMARY_10,"container");
		container.setHeight(400, Unit.PIXELS);
		container.setWidth(700, Unit.PIXELS);

		Accordion accordion = new Accordion();

        //createpanelcontent() returns default vertical layout with each item wrapped in a default span
		accordion.add("Panel 1-3", createPanelContent("Item 1", "Item 2", "Item 3"))
				.addThemeVariants(DetailsVariant.REVERSE);

		accordion.add("Panel 4-12", createPanelContent("Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9",
				"Item 10", "Item 11", "Item 12")).addThemeVariants(DetailsVariant.REVERSE);

		accordion.add("Panel 13-15", createPanelContent("Item 13", "Item 14", "Item 15"))
				.addThemeVariants(DetailsVariant.REVERSE);

		container.add(accordion);
		add(container);
	}

the css


vaadin-accordion-heading {
	background-color: var(--accordion-bg);
	padding: 0 8px 0;
	margin: 2px 0 2px;
	font-size: 16px;
	color: var(--text);
}

vaadin-accordion {
	height: 100%;
	display: flex;
	flex-direction: column;
}

vaadin-accordion-panel[opened] {
	flex-grow: 1;
	max-height: 100%;
	overflow: hidden;
	width: 100%;
}

vaadin-accordion-panel::part(content) {
	color: var(--text);
	height: 100%;
	overflow-x: clip;
	overflow-y: auto;
}
2

You’re pretty close, and I didn’t look through what is going wrong in your solution per se, but I would say try to do less with css and rely more on framework features.

This is all the css you shoud need:

vaadin-accordion {
    display: flex;
    flex-flow: column;
    min-height: 100%;
}

vaadin-accordion-panel[opened] {
    flex-grow: 1;
}

Wrap the Accordion into a Scroller with 100% w&h. Don’t set a height on the Accordion.

3

That would put the scrollbar to the whole accordion.

What I was hoping to achieve is

Screenshot from 2025-07-14 19-53-19
Screenshot from 2025-07-14 19-53-191086×753 16.7 KB

All accordion heading will always be seen in the container(red) and the items(green) will have a scrollbar.

I tried scroller tip on that (items) but ended up with this same result.

4

Ah, sorry, misunderstood.
Then you will need a bit more css hacking.
Let’s ditch the Scroller entirely, and use this css instead:

vaadin-accordion-panel {
    display: flex;
    flex-flow: column;

    &[opened] {
        flex-grow: 1;
        min-height: var(--lumo-size-m);
    }

    &::part(content) {
        min-height: 0;
    }

    & > div {
        height: 100%;
        overflow: auto;
    }
}
5

Thank you

Just adding this doesn’t seem to change anything as in the accordion behaves just like the default.

If I keep this and add your solution it works exactly as I want.

Screenshot from 2025-07-14 21-28-15
Screenshot from 2025-07-14 21-28-151600×834 26.7 KB