Cover Block: Minimum height settings no longer responsive to expand height to adjacent Column blocks

[TeniCola]

Steps to reproduce the behavior

1. Create or edit any post type, such as a page (also tested on posts and portfolio).
2. Create a container like a Column block, and insert a decent amount of content in one column (a few paragraphs, etc.)
3. In the other column, create a cover block with a fixed image, and set a "Minimum height of cover" in the sidebar settings, under Dimensions.
4. Publish or preview the post on the live site.

What I expected to happen

For the cover block to display a minimum height that expands responsively down to the bottom of the column -- even when the minimum height is shorter than the content beside it

What actually happened

If the minimum height is shorter than the adjacent content, then the cover block is truncated; it does not expand to the end of the container, only to the minimum height set.

Context

I'm an HE / Automattician with a personal blog that uses Cover blocks inside of Column blocks, in several areas of the site. They have a minimum height set at 240 px in a column block, next to text of variable sizing, so that the block resizes with the browser and the additional text.

I noticed recently that the Cover blocks that used to be responsive are no longer resizing; they stop right at 240px, even when the content beside them is much taller.

My concern is whether anything changed in the recent Gutenberg update that may have caused this new bug, and if other users may notice this down the line. My suggestion is to review any changes to the cover block that stopped it from adjusting it’s height in a responsive manner in columns. See Screenshots and "Level of Impact" for more details

Screenshots:

_REVISED NOTE: I managed to make a test site that better demonstrates this. The link to the test site and personal site it can be found linked in p1612922533000600-slack-triage -- Continued in p1613078750066000-slack-gutenberg-on-dotcom

Live Site, Tests 1 and 2 (out of 3): https://d.pr/i/MxDg8S

Live Site, Test 3: https://d.pr/i/pgyLTp

Additional screenshot from personal site that I'm keeping for posterity:

• Editor View: https://d.pr/i/R3gBZt
• Preview and Live Site: https://d.pr/i/GyO8to

Browser / OS version

Browser: Version 88.0.4324.150 (Official Build) (x86_64)
Happens on both Windows and Mac OS

Is this specific to the applied theme? Which one?

Replicated on several themes -- include classic themes like Twenty Fifteen, and block-friendly themes like Maywood, Seedlet, and Spearhead.

Does this happen on simple or atomic sites or both?

Happening on both simple and atomic sites.

Is there any console output or error text?

No console errors that I can find on the live site (there are some in Calypso's preview that don't seem to have anything to do with the Cover block).

Level of impact

Not detrimental to function, but contrary to how the Cover blocks Dimensions for "minimum height setting" are supposed to work: https://wordpress.com/support/wordpress-editor/blocks/cover-block/#dimensions

The reason why I feel this is important, is because the appeal of Cover blocks are that they are built to be responsive and expand in columns (compared to an Image block in this same area, or a Media & Text block). This setting is for a “minimum” height, rather than a maximum, so it should have the ability to hit the bottom of the container if the column beside it has a lot of content.

Also, I haven't found an ideal workaround around for this yet; screenshots and test site clarify why increasing the minimum height is not ideal for a responsive website, especially on mobile.

[TeniCola]

Discussion of issue started in p1612860973106000-slack-triage, with details to my live site as a demonstration.

[TeniCola]

Leaving a note that I plan to revise the content of this bug report with more details I've found after discussions in Slack, but I'll leave a TL;DR reminder:

The issue isn’t that the minimum height is not being respected (as I originally thought), but that the minimum height is not being responsive anymore, when it should be for the Cover block. Additionally, there is reason why a workaround to increase the minimum height isn't ideal (TL;DR it means the block becomes larger on mobile, too).

Details and a live test with more context can be found in p1612860973106000-slack-triage, until this report is revised.

[TeniCola]

Discussion continued in p1613078750066000-slack-gutenberg-on-dotcom. It seem this issue may have been an unexpected result of the recent merge here, where we eliminated the height = 100% styling that caused an overlapping issue for cover blocks: WordPress/gutenberg#28455

[TeniCola]

WORKAROUND -- Since the merge in the above repo was meant to correct the cover block's overlapping issue in flex containers, it makes sense why the minimum height were no longer expanding on columns.

While there's more slack discussion, I was able to develop this workaround with Cover blocks, to add the responsiveness back to my own personal site:

/* Fix for GH Issue for cover block minimum height responsiveness */
.wp-block-cover {
    height: 100%;
}

Leaving this open for now in case other users encounter this in chat. Also if there is a way to have both attributes (no overlapping, but responsive minimum heights) coexist in the future that would.

[synora]

I came across this issue while triaging Cover Block issues and I can replicate your report.

What's strange is that things work as expected in the editor:

But things get weird when the page is published:

The CSS workaround does solve the issue though: