Branch: refs/heads/main
Home: https://github.com/WebKit/WebKit
Commit: adeb98dd2acd67e8201ee7ff7f8eb570103f03f5
https://github.com/WebKit/WebKit/commit/adeb98dd2acd67e8201ee7ff7f8eb570103f03f5
Author: Alan Baradlay <[email protected]>
Date: 2026-04-20 (Mon, 20 Apr 2026)
Changed paths:
M LayoutTests/TestExpectations
M Source/WebCore/rendering/RenderFlexibleBox.cpp
M Source/WebCore/rendering/RenderFlexibleBox.h
Log Message:
-----------
Column wrap flex inside column flex wraps incorrectly when flex-basis
overrides height
https://bugs.webkit.org/show_bug.cgi?id=312623
Reviewed by Antti Koivisto.
Consider:
<div style="display: flex; flex-direction: column">
<div style="display: flex; flex-direction: column; flex-wrap: wrap;
flex: 1 0 0px; height: 500px">
<div style="width: 100px; height: 50px"></div>
<div style="width: 100px; height: 50px"></div>
</div>
</div>
The inner flex container (B) is a column wrap flex and also a flex item
of the outer column flex with flex-basis: 0px and height: 500px.
When the outer flex computes B's flex base size, it sets a scoped
override (overridingLogicalHeightForFlexBasisComputation) to 0px on B.
During this, B lays out internally and needs to decide its available
main axis space for wrapping. mainAxisContentExtent calls
computeLogicalHeight, which sees the 0px flex-basis override and
returns 0 instead of 500px. With 0px of available space, the two 50px
items wrap into separate columns instead of stacking vertically.
The fix adds mainAxisAvailableSpace() which computes the container's
own available main axis space for wrapping, temporarily clearing the
flex-basis override so computeLogicalHeight sees the specified height.
The override is for the parent's sizing of this item, not for this
container's internal wrapping decisions.
mainAxisContentExtent keeps the override - it's used for flex
distribution and positioning where the parent's perspective applies.
* LayoutTests/TestExpectations:
* Source/WebCore/rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::mainAxisAvailableSpace):
(WebCore::RenderFlexibleBox::canFitItemWithTrimmedMarginEnd const):
(WebCore::RenderFlexibleBox::performFlexLayout):
(WebCore::RenderFlexibleBox::computeNextFlexLine):
* Source/WebCore/rendering/RenderFlexibleBox.h:
Canonical link: https://commits.webkit.org/311623@main
To unsubscribe from these emails, change your notification settings at
https://github.com/WebKit/WebKit/settings/notifications
