Panel - extra vertical space is present when content does not take up entire height

[iyouth23]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

calcite-panel will add extra vertical space if its content doesn't take up the entire height of the screen. This is especially visible when I want to set content to have a fixed height while still allowing for scrolling of internal content that exceeds this height.

For example, I want an action-bar inside a calcite-panel, but I want its max-height to be 500px and have overflow-y: scroll.

This is occurring due to a change to calcite-panel in 2.12, where <div class="content-wrapper"> now has position: relative: https://github.com/Esri/calcite-design-system/blob/dev/packages/calcite-components/src/components/panel/panel.scss#L168

Expected Behavior

Extra vertical space should not appear below the content's max-height, and neither should the scrollbar. The panel should snap to the height of the content inside.

Reproduction Sample

https://codepen.io/iyouth66/pen/BaXKYxz

Reproduction Steps

1. Open this Codepen: https://codepen.io/iyouth66/pen/BaXKYxz?editors=1100
2. Observe the extra space and scrollbar when the content has a fixed height and the internal content (which should scroll) exceeds the fixed height.

Reproduction Version

2.12.0

Relevant Info

cc @driskull @zaramatheson

Regression?

2.11.0

Priority impact

impact - p1 - need for current milestone

Impact

Map Viewer has many places where we have unnecessary extra vertical space/scrollbars now. See the examples below. We're seeking a fix for this or a workaround in the meantime.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Online

[driskull]

@iyouth23 the panel is designed to scroll content. Can you set the height on the panel instead of a div inside of it?

Like: https://codepen.io/driskull/pen/XWvjXNW?editors=1100

[driskull]

@iyouth23 in your example, if you just add position:relative; to your div it seems to fix it. Can you verify?

https://codepen.io/driskull/pen/NWQRRoJ?editors=1100

[jcfranco]

Expanding on @driskull's suggestion, would the following rule help as a workaround?

​calcite-panel > :first-child {
 position: relative;
}

[driskull]

related: #10095

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in 2.14.0-next.12.