diff --git a/Tests/LibWeb/Layout/expected/flex/flex-item-percentage-main-size-during-min-content-sizing.txt b/Tests/LibWeb/Layout/expected/flex/flex-item-percentage-main-size-during-min-content-sizing.txt new file mode 100644 index 00000000000..4839038df49 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/flex/flex-item-percentage-main-size-during-min-content-sizing.txt @@ -0,0 +1,11 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + Box at (0,0) content-size 60x50 flex-container(row) [FFC] children: not-inline + Box at (8,3) content-size 44x44 flex-container(row) flex-item [FFC] children: not-inline + ImageBox at (8,3) content-size 44x44 flex-item children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableBox (Box) [0,0 60x50] + PaintableBox (Box) [8,3 44x44] + ImagePaintable (ImageBox) [8,3 44x44] diff --git a/Tests/LibWeb/Layout/input/flex/flex-item-percentage-main-size-during-min-content-sizing.html b/Tests/LibWeb/Layout/input/flex/flex-item-percentage-main-size-during-min-content-sizing.html new file mode 100644 index 00000000000..144c04435e1 --- /dev/null +++ b/Tests/LibWeb/Layout/input/flex/flex-item-percentage-main-size-during-min-content-sizing.html @@ -0,0 +1,19 @@ + + + diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 7a15ae20116..a98d3d088b0 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -587,6 +587,13 @@ void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size( return get_pixel_height(child_box, size); } + // AD-HOC: If we're sizing the flex container under a min-content constraint in the main axis, + // flex items resolve percentages in the main axis to 0. + if (m_available_space_for_items->main.is_min_content() + && computed_main_size(item.box).contains_percentage()) { + return CSSPixels(0); + } + // B. If the flex item has ... // - an intrinsic aspect ratio, // - a used flex basis of content, and