Skip to content

fix: flex container size should add gap size if gap is defined #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TtTRz merged 1 commit into from
Dec 30, 2025
Merged

fix: flex container size should add gap size if gap is defined #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions float-pigment-forest/tests/custom/css_flexbox/gap.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,3 +137,15 @@ fn row_gap_with_percentage_in_flex_column_box() {
"#
)
}

#[test]
fn flex_item_with_gap_should_shrink_to_fit() {
assert_xml!(
r#"
<div style="display: flex; width: 100px; height: 50px; flex-direction: column; gap: 10px;" expect_height="50">
<div style="height: 30px;" expect_top="0" expect_height="20"></div>
<div style="height: 30px;" expect_top="30" expect_height="20"></div>
</div>
"#
)
}
23 changes: 12 additions & 11 deletions float-pigment-layout/src/algo/flex_box.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,7 @@ struct FlexLine<'a, T: LayoutTreeNode> {
cross_size: T::Length,
extra_offset_cross: T::Length,
first_baseline_ascent: T::Length,
total_gap: T::Length,
}

pub(crate) trait FlexBox<T: LayoutTreeNode> {
Expand Down Expand Up @@ -399,6 +400,7 @@ impl<T: LayoutTreeNode> FlexBox<T> for LayoutUnit<T> {
cross_size: T::Length::zero(),
extra_offset_cross: T::Length::zero(),
first_baseline_ascent: T::Length::zero(),
total_gap: T::Length::zero(),
});
} else {
let mut flex_items = &mut flex_items[..];
Expand Down Expand Up @@ -429,6 +431,7 @@ impl<T: LayoutTreeNode> FlexBox<T> for LayoutUnit<T> {
cross_size: T::Length::zero(),
extra_offset_cross: T::Length::zero(),
first_baseline_ascent: T::Length::zero(),
total_gap: T::Length::zero(),
});
flex_items = rest;
}
Expand All @@ -447,6 +450,7 @@ impl<T: LayoutTreeNode> FlexBox<T> for LayoutUnit<T> {
main_axis_gap::<T>(dir, style, node, &requested_inner_size),
line.items.len(),
);
line.total_gap = total_main_axis_gap;
// 1. Determine the used flex factor. Sum the outer hypothetical main sizes of all
// items on the line. If the sum is less than the flex container’s inner main size,
// use the flex grow factor for the rest of this algorithm; otherwise, use the
Expand Down Expand Up @@ -706,7 +710,7 @@ impl<T: LayoutTreeNode> FlexBox<T> for LayoutUnit<T> {
line.items
.iter()
.map(|item| item.outer_target_size.main_size(dir)),
);
) + line.total_gap;
acc.max(length)
});
let size = longest_line + padding_border.main_axis_sum(dir);
Expand Down Expand Up @@ -925,15 +929,15 @@ impl<T: LayoutTreeNode> FlexBox<T> for LayoutUnit<T> {
// and the sum of the flex lines' cross sizes is less than the flex container’s inner cross size,
// increase the cross size of each flex line by equal amounts such that the sum of their cross sizes
// exactly equals the flex container’s inner cross size.
let total_cross_axis_gap = sum_axis_gaps(
cross_axis_gap::<T>(dir, style, node, &requested_inner_size),
flex_lines.len(),
);

if style.align_content() == AlignContent::Stretch {
let requested_cross_size = requested_size.cross_size(dir).or_zero();
let min_inner_cross =
self_min_max_limit.cross_size(requested_cross_size, dir) - padding_border_cross;
let total_cross_axis_gap = sum_axis_gaps(
cross_axis_gap::<T>(dir, style, node, &requested_inner_size),
flex_lines.len(),
);
let line_total_cross: T::Length =
length_sum(flex_lines.iter().map(|line| line.cross_size)) + total_cross_axis_gap;

Expand All @@ -952,7 +956,8 @@ impl<T: LayoutTreeNode> FlexBox<T> for LayoutUnit<T> {
// - Otherwise, use the sum of the flex lines' cross sizes, clamped by the used
// min and max cross sizes of the flex container.

let total_cross_size = length_sum(flex_lines.iter().map(|line| line.cross_size));
let total_cross_size =
length_sum(flex_lines.iter().map(|line| line.cross_size)) + total_cross_axis_gap;
container_size.set_cross_size(
dir,
self_min_max_limit.cross_size(
Expand Down Expand Up @@ -1062,11 +1067,7 @@ impl<T: LayoutTreeNode> FlexBox<T> for LayoutUnit<T> {
// 2. Align the items along the main-axis per justify-content.

for line in &mut flex_lines {
let total_main_axis_gap = sum_axis_gaps(
main_axis_gap::<T>(dir, style, node, &requested_inner_size),
line.items.len(),
);
let used_space: T::Length = total_main_axis_gap
let used_space: T::Length = line.total_gap
+ length_sum(
line.items
.iter()
Expand Down