Unable to scroll constrained block content

[nwhittaker]

Actual Behavior

If the height of a block's content exceeds the height of the block, it's not possible to constrain the content to 100% of the block and scroll the overflow.

Expected Behavior

If the height of a block's content exceeds the height of the block, it is possible to constrain the content to 100% of the block and scroll the overflow.

Reproduction Sample

https://codepen.io/nwhittaker-esri/pen/BaxOQga

Reproduction Steps

1. Visit the code sample
2. Try to scroll the first block and see it shows the current behavior where the user is unable to scroll the contents of the block.
3. Try to scroll the second block and see it is patched to show the expected behavior of being able to scroll the contents of the block.

Reproduction Version

beta.97

Relevant Info

Related to #5422.

Regression?

No response

Impact

Field Maps has a modal layout where a block is used to expand/collapse a preview area. The preview area has a somewhat fixed height (relative to the height of the viewport) but a variable amount of content, so it needs to be scrollable.

The current workaround is to use a custom layout and lose the expand/collapse behavior.

Esri team

ArcGIS Field Apps

[jcfranco]

I believe this is doable w/o any further changes to block. Can you give this a try? https://codepen.io/jcfranco/pen/GRGrVeN

[nwhittaker]

Thank @jcfranco, that looks like a doable workaround, but I'm wondering if you think a simpler approach is feasible.

The underlying issue stems from how flex box items have an implicit min-height equal to the height of their content. Looking at the calcite-block shadow DOM, giving the section.content element a min-height: 0 style is sufficient to get scrolling working correctly w/out needing the extra mark-up and styling: https://codepen.io/nwhittaker-esri/pen/RwJpVLg

Not sure if this change introduces other layout issues, but it feels like it lends itself better to more intuitive mark-up and styling.