Skip to content

fix: prevent .card from collapsing in height-constrained flex columns#148

Closed
howwohmm wants to merge 1 commit intoknadh:masterfrom
howwohmm:fix/card-flex-collapse
Closed

fix: prevent .card from collapsing in height-constrained flex columns#148
howwohmm wants to merge 1 commit intoknadh:masterfrom
howwohmm:fix/card-flex-collapse

Conversation

@howwohmm
Copy link
Copy Markdown

Fixes #147

Problem

.card sets overflow: hidden, which per CSS spec causes min-height: auto to resolve to 0 for flex items. When a .card is a direct child of a height-constrained flex column (e.g. main.vstack inside [data-sidebar-layout]), flex-shrink: 1 compresses the card to zero height.

Fix

.card {
  /* existing styles... */
  min-height: min-content;
}

One line. Ensures the card never shrinks below its content size while preserving overflow: hidden for border-radius clipping.

What it doesn't change

  • overflow: hidden stays — still needed for content containment and border-radius
  • Cards outside flex contexts are completely unaffected
  • No size increase to speak of (1 declaration)

.card sets overflow: hidden, which per CSS spec causes min-height: auto
to resolve to 0 for flex items. When a card is a direct child of a
height-constrained flex column (e.g. main.vstack inside
data-sidebar-layout), flex-shrink compresses it to zero height.

Adding min-height: min-content ensures the card never shrinks below its
content size, while preserving overflow: hidden for border-radius
clipping and content containment.

Fixes knadh#147

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@knadh
Copy link
Copy Markdown
Owner

knadh commented Mar 24, 2026

Missed this PR. Also, removing overflow: hidden entirely was the better approach. Fixed here: 072d84f

@knadh knadh closed this Mar 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

.card collapses to zero height inside height-constrained flex column

2 participants