Fix issue with tab panel not sizing to height of tabs component. (#2458)

# Pull Request

## 🤨 Rationale

The update to the `Tabs` component introducing scroll buttons #2440 also
updated the `display` setting to `flex`. This resulted in a missed
change in behavior with how the `TabPanel` might size to the height of
the `Tabs` component. See [this
discussion](https://dev.azure.com/ni/DevCentral/_git/Skyline/pullrequest/821815?discussionId=7029412).

## 👩‍💻 Implementation

Just needed to set a style on `[part="tabpanel"]` to have `flex: 1;`.

## 🧪 Testing

Added a Chromatic test that would fail without the style change.

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [ ] I have updated the project documentation to reflect my changes or
determined no changes are needed.

change/@ni-nimble-components-a42ee4bf-86ac-4208-83d2-4e3dc091a204.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix issue with tab panel not sizing to height of tabs component.",
+  "packageName": "@ni/nimble-components",
+  "email": "26874831+atmgrifter00@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/patterns/tabs/styles.ts

@@ -36,4 +36,8 @@ export const styles = css`
     [part='end'] {
         flex: 1;
     }
+
+    [part='tabpanel'] {
+        flex: 1;
+    }
 `;

packages/storybook/src/nimble/tabs/tabs-matrix.stories.ts

@@ -89,3 +89,12 @@ export const panelOverflow: StoryFn = createStory(html`
         <${tabPanelTag} style="width: 450px;">${loremIpsum}</${tabPanelTag}>
     </${tabsTag}>
 `);
+
+export const panelSizeToContent: StoryFn = createStory(html`
+    <${tabsTag} style="width: 400px; height: 400px">
+        <${tabTag}>Tab One</${tabTag}>
+        <${tabPanelTag} style="width: 400px; height: 100%;">
+            <div style="width: 250px; height: 100%; background: red;"></div>
+        </${tabPanelTag}>
+    </${tabsTag}>
+`);