fix(tile): allow percentage inline-size on slotted content to be base…

…d on host (#11283)

**Related Issue:** [#11199
](#11199 (comment))

## Summary

This update allows percentage `inline-size/width` styles set on slotted
content to be based on the host `calcite-tile` element.

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

@@ -69,6 +69,7 @@ calcite-link {
 .content-container {
   flex-direction: column;
   @include word-break();
+  inline-size: var(--calcite-container-size-content-fluid);
 }
 
 .text-content-container {

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

@@ -957,6 +957,58 @@ export const contentTopButton_TestOnly = (): string => html`
   </calcite-tile>
 `;
 
+export const contentTopFullWidth_TestOnly = (): string => html`
+  <style>
+    .slotted {
+      display: inline-flex;
+      justify-content: space-between;
+    }
+    .full-width {
+      inline-size: 100%;
+    }
+  </style>
+  <calcite-tile
+    icon="rangefinder"
+    heading="Field operator"
+    description="This role allows users in the field to create new Reports, and view and edit existing Reports and Attachments"
+  >
+    <div slot="content-top" class="slotted full-width">
+      <div>left side</div>
+      <div>right side</div>
+    </div>
+    <div slot="content-bottom" class="slotted">
+      <div>left side</div>
+      <div>right side</div>
+    </div>
+  </calcite-tile>
+`;
+
+export const contentBottomFullWidth_TestOnly = (): string => html`
+  <style>
+    .slotted {
+      display: inline-flex;
+      justify-content: space-between;
+    }
+    .full-width {
+      inline-size: 100%;
+    }
+  </style>
+  <calcite-tile
+    icon="rangefinder"
+    heading="Field operator"
+    description="This role allows users in the field to create new Reports, and view and edit existing Reports and Attachments"
+  >
+    <div slot="content-top" class="slotted">
+      <div>left side</div>
+      <div>right side</div>
+    </div>
+    <div slot="content-bottom" class="slotted full-width">
+      <div>left side</div>
+      <div>right side</div>
+    </div>
+  </calcite-tile>
+`;
+
 export const contentStartRTL_TestOnly = (): string => html`
   <calcite-tile description="polygon layer" heading="Percent of population that carpool to work" dir="rtl">
     <calcite-icon scale="s" slot="content-start" icon="polygon"></calcite-icon>