DataViews: Fix wrapper height resolution in flex layouts#76945
Open
allilevine wants to merge 2 commits intotrunkfrom
Open
DataViews: Fix wrapper height resolution in flex layouts#76945allilevine wants to merge 2 commits intotrunkfrom
allilevine wants to merge 2 commits intotrunkfrom
Conversation
Add flex-grow: 1 and min-height: 0 to .dataviews-wrapper so it correctly fills available space when placed inside a flex parent that derives its height from flex-grow rather than an explicit height property. This allows .dataviews-layout__container's overflow: auto to activate properly. The existing height: 100% is preserved for non-flex contexts. Fixes #76944 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @allilevine! In case you missed it, we'd love to have you join us in our Slack community. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
Size Change: +35 B (0%) Total Size: 7.73 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in fe544d5. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/23819258634
|
ntsekouras
reviewed
Apr 6, 2026
| .dataviews-picker-wrapper { | ||
| height: 100%; | ||
| flex-grow: 1; | ||
| min-height: 0; |
Contributor
There was a problem hiding this comment.
I'd defer to better experts in css but with the min-height can the node now shrink below its content height and affect how scrollbars appear?
| This PR | Trunk |
|---|---|
 |
 |
Contributor
There was a problem hiding this comment.
I think it can be argued that this is an enhancement or even a bug fix; if an area scrolls we should show a scrollbar, right? It seems like an accessibility risk otherwise.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Closes #76944
Adds
flex-grow: 1andmin-height: 0to.dataviews-wrapper/.dataviews-picker-wrapperso the wrapper correctly fills available space in flex layout parents.Why?
.dataviews-wrapperusesheight: 100%which doesn't resolve to a definite value when the parent container gets its height fromflex-growrather than an explicitheightproperty. This causes.dataviews-layout__container'soverflow: autoto never activate, so the table grows to full content height and overflows its container instead of scrolling.How?
Added two CSS properties to the existing
.dataviews-wrapper/.dataviews-picker-wrapperrule:flex-grow: 1— fills the parent's remaining space in flex layoutsmin-height: 0— overrides the defaultmin-height: autoso the element can shrink below its content heightThe existing
height: 100%is preserved for non-flex contexts.Testing Instructions
<DataViews>component inside a flex column container where the parent usesflex-grow: 1(not an explicitheight) — for example, inside the@wordpress/admin-uiPagecomponent, where.admin-ui-page__contentusesflex-grow: 1.dataviews-layout__containerTesting Instructions for Keyboard
No keyboard-specific changes — this is a CSS-only fix affecting scroll containment.
Screenshots or screencast
N/A — layout/scrolling behavior fix, not a visual change.
Use of AI Tools
This PR was authored with the assistance of Claude Code (Claude Opus 4.6). The change was reviewed and validated by a human contributor.