<sl-tab-group> filling vertical height with placement="start"

[leonbeon]

Hey everyone, I tried everything under the sun with the current styles, styling shadowRoot properties, using a lot of ::part selectors and it seems like nothing short of editing the source itself can achieve this cleanly: Inside a <sl-tab-group>, when using vertical tabs (e.g. placement="start" or placement="end"), the tabs do not fill the vertical space given by the container, but instead keep their height. If the tabbed content is longer than the tab container, this results in a (subjectively) ugly gap.

Adding to this, given a fixed height container and adding overflow-y: scroll to the tab group, the content scrolls but the tab container does as well (which is clearly not correct). Idealy, I would love the following features added for vertical tab groups:

1. Adding an option to allow the tab sidebar to fill the full height (or allowing height: 100% to work).
2. Adding an option to make the tabbed content scrollable, while keeping the tab container fixed.

Alternatively, if anyone has any idea how to achieve this with the current component, I'd be more than happy to try it out! For now, I am using the horizontal tab group.

[claviska]

Are you referring to the tab panels? If so, setting height: 100% seems to do the trick.

sl-tab-panel {
  height: 100%;
  padding-block: var(--sl-spacing-medium); /* set to your preference */
}

Try it on CodePen

If you have a more specific use case you can't get working, please post a pen so we can take a closer look.

[leonbeon]

Targeting sl-tab-panel directly instead of sl-tab-group::part(body) seems to do the trick! It is still a bit hacky (position: absolute on sl-tab-group::part(nav) to keep it from scrolling with the body) but it works. Thank you! :)