fix(panel): Allow panel content to take full height.

packages/calcite-components/src/components/panel/panel.scss

@@ -99,16 +99,14 @@
 }
 
 .content-wrapper {
-  @apply overflow-auto h-full;
-}
-
-.content-container {
-  @apply bg-background
-  flex
+  @apply flex
   flex-auto
   flex-col
   flex-nowrap
-  items-stretch;
+  items-stretch
+  bg-background
+  overflow-auto
+  h-full;
 }
 
 .footer {

packages/calcite-components/src/components/panel/panel.stories.ts

@@ -274,3 +274,42 @@ export const footerAndActionBarWithoutContent_TestOnly = (): string => html`<cal
   </calcite-action-bar>
   <p slot="footer">Footer content!</p>
 </calcite-panel>`;
+
+export const flexContent_TestOnly = (): string => html`<calcite-panel
+  style="height: 300px; width: 500px"
+  heading="My Panel"
+  ><div
+    style="display: flex; flex-direction: column; height: 100%; width: 100%; background-size: 16px 16px; background-color: gray; background-image: radial-gradient(
+    circle,
+    white 1px,
+    transparent 1px
+  );"
+  ></div
+></calcite-panel>`;
+
+export const flexContentWithFAB_TestOnly = (): string => html`<calcite-panel
+  style="height: 300px; width: 500px"
+  heading="My Panel"
+  ><div
+    style="display: flex; flex-direction: column; height: 100%; width: 100%; background-size: 16px 16px; background-color: gray; background-image: radial-gradient(
+  circle,
+  white 1px,
+  transparent 1px
+);"
+  ></div>
+  <calcite-fab slot="fab"></calcite-fab
+></calcite-panel>`;
+
+export const overflowContentWithFab_TestOnly = (): string => html` <calcite-panel
+  style="max-height: 300px; height: 300px; width: 500px"
+  heading="My Panel"
+  ><div style="min-height: 500px">My Content</div>
+  <calcite-fab slot="fab"></calcite-fab
+></calcite-panel>`;
+
+export const noOverflowContentWithFab_TestOnly = (): string => html` <calcite-panel
+  style="max-height: 300px; height: 300px; width: 500px"
+  heading="My Panel"
+  ><div>My Content</div>
+  <calcite-fab slot="fab"></calcite-fab
+></calcite-panel>`;

packages/calcite-components/src/components/panel/panel.tsx

@@ -537,9 +537,7 @@ export class Panel
         // eslint-disable-next-line react/jsx-sort-props
         ref={this.setPanelScrollEl}
       >
-        <section class={CSS.contentContainer}>
-          <slot onSlotchange={this.handleDefaultSlotChange} />
-        </section>
+        <slot onSlotchange={this.handleDefaultSlotChange} />
         {this.renderFab()}
       </div>
     );

packages/calcite-components/src/components/panel/resources.ts

@@ -14,7 +14,6 @@ export const CSS = {
   headerActionsEnd: "header-actions--end",
   headerActionsStart: "header-actions--start",
   contentWrapper: "content-wrapper",
-  contentContainer: "content-container",
   fabContainer: "fab-container",
   footer: "footer",
 };