test(panel, flow-item): add screenshot tests for overflow (#8028) (#8161

)

**Related Issue:** #8028 

## Summary
Adds screenshots for panel and flow-item.
Follow-up from #8055

cc @driskull

packages/calcite-components/src/components/flow-item/flow-item.stories.ts

@@ -242,6 +242,32 @@ export const noDoubleScrollbars_TestOnly = (): string => html`
   </div>
 `;
 
+export const overflowContent_TestOnly = (): string => html` <style>
+    .container {
+      max-height: 300px;
+      width: 300px;
+    }
+  </style>
+  <div class="container">
+    <calcite-flow>
+      <calcite-flow-item heading="My Panel">
+        <calcite-list>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+          <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        </calcite-list>
+      </calcite-flow-item>
+    </calcite-flow>
+  </div>`;
+
 export const withActionBar_TestOnly = (): string => html`<div style="width: 300px;">
   <calcite-flow-item height-scale="s">
     <calcite-action-bar slot="action-bar">

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

@@ -404,6 +404,30 @@ export const flexContentWithFAB_TestOnly = (): string => html`<calcite-panel
   <calcite-fab slot="fab"></calcite-fab
 ></calcite-panel>`;
 
+export const overflowContent_TestOnly = (): string => html` <style>
+    .container {
+      max-height: 300px;
+      width: 300px;
+    }
+  </style>
+  <div class="container">
+    <calcite-panel heading="My Panel">
+      <calcite-list>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+        <calcite-list-item label="My list item" description="My description"></calcite-list-item>
+      </calcite-list>
+    </calcite-panel>
+  </div>`;
+
 export const overflowContentWithFab_TestOnly = (): string => html` <calcite-panel
   style="max-height: 300px; height: 300px; width: 500px"
   heading="My Panel"