fix(block): improve content layout (#5473)

#5422

Author: jcfranco

src/components/block/block.scss

@@ -129,9 +129,12 @@ calcite-handle {
   @apply text-color-1;
 }
 
+.container {
+  @apply flex flex-col h-full;
+}
+
 .content {
-  @apply animate-in
-    relative;
+  @apply animate-in flex-1 relative;
 }
 
 .content--spaced {

src/components/block/block.stories.ts

@@ -202,3 +202,8 @@ export const darkThemeRTL_TestOnly = (): string =>
       </calcite-block-section>
     `
   );
+
+export const contentCanTakeFullHeight_TestOnly = (): string =>
+  html`<calcite-block open heading="Heading" summary="summary" style="height: 250px">
+    <div style="background: red; height: 100%;">should take full width of the content area</div>
+  </calcite-block>`;

src/components/block/block.tsx

@@ -290,7 +290,7 @@ export class Block implements ConditionalSlotComponent, InteractiveComponent {
         <article
           aria-busy={toAriaBoolean(loading)}
           class={{
-            [CSS.article]: true
+            [CSS.container]: true
           }}
         >
           {headerNode}

src/components/block/resources.ts

@@ -1,5 +1,5 @@
 export const CSS = {
-  article: "article",
+  container: "container",
   content: "content",
   contentSpaced: "content--spaced",
   headerContainer: "header-container",