Skip to content

fix(layout): keep block axis unconstrained for abs-pos auto height - #46

Merged
TtTRz merged 1 commit into
wechat-miniprogram:masterfrom
gaojunran:fix/abs-pos-auto-height
Oct 29, 2026
Merged

TtTRz merged 1 commit into
wechat-miniprogram:masterfrom
gaojunran:fix/abs-pos-auto-height

Conversation

@gaojunran

Copy link
Copy Markdown
Member

An absolutely-positioned box with height: auto was capped by the space left in its containing block, so content taller than that space got squeezed. A column flex container inside such a box would fall back to its min-content main size and shrink items that declared an explicit height.

Root cause: compute_special_position filled both axes of the max_content constraint with containing block size - insets. Shrink-to-fit is inline-axis only (CSS2.1 §10.3.7); the block axis of an auto-height abs-pos box is content-determined (§10.6.4). With bottom: 200px inside a 0-height bar the value went negative, got floored to 0, and flex_box then took the
available < max-content branch (min-content floor) for the column container.

Fix: keep the inline-axis constraint (behaviour unchanged, still clamped by the element's own min/max), pass None for the block axis, chosen by writing_mode. None is already a supported "indefinite" state for every consumer — flow containers measure content when the cross size is indefinite, and flex takes max_content_size when available space is None.

@gaojunran
gaojunran requested review from LastLeaf and TtTRz and removed request for TtTRz October 29, 2026 09:45

@TtTRz TtTRz left a comment •

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unconditionally clearing the block-axis max_content also removes the explicit max-height constraint needed to calculate the intrinsic width of a wrapping column flex container.

Inside a 200px × 200px positioned containing block, use:

.container {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 100px;
}

.item {
  width: 50px;
  height: 60px;
  flex: none;
}

With three items, the parent commit and Chrome produce a container width of 150px. This commit produces 50px, while the items still occupy three columns and overflow the container.

The initial AllSize pass measures a single column without the height constraint. The subsequent Position pass wraps the items, but the incorrect width is already fixed. Flexbox §9.9.2 requires the max-content cross size of a multiline column container to account for the resulting column widths.

Suggested fix

Remove the containing block’s remaining-space fallback from the block axis, while preserving definite sizes and resolved explicit maxima:

let max_content = min_max_limit.normalized_size(match style.writing_mode() {
    WritingMode::HorizontalTb => OptionSize::new(
        inline_max_content.width,
        size.height.or(min_max_limit.max_height),
    ),
    WritingMode::VerticalLr | WritingMode::VerticalRl => OptionSize::new(
        size.width.or(min_max_limit.max_width),
        inline_max_content.height,
    ),
});

@gaojunran
gaojunran force-pushed the fix/abs-pos-auto-height branch from 8f1c9be to d409cc2 Compare October 29, 2026 11:17
@gaojunran
gaojunran requested a review from TtTRz October 29, 2026 11:17

@TtTRz TtTRz left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@TtTRz
TtTRz merged commit b9b33c6 into wechat-miniprogram:master Oct 29, 2026
2 checks passed
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.

3 participants