Gap is ignored when a flex item has an auto margin

[richardhozak]

taffy version

Commit aa1c464e (post v0.9.2)

Platform

Rust

What you did

Created a flex column with gap set, where the first child has margin-bottom: auto.

let mut tree: TaffyTree<()> = TaffyTree::new();

let a = tree.new_leaf(Style {                                                          
    size: Size { width: length(50.0), height: length(50.0) },
    margin: Rect { bottom: LengthPercentageAuto::AUTO, ..Rect::zero() },               
    ..Default::default()                                        
}).unwrap();                                                                           
   
let b = tree.new_leaf(Style {                                                          
    size: Size { width: length(50.0), height: length(50.0) },   
    ..Default::default()
}).unwrap();

let container = tree.new_with_children(Style {                                         
    display: Display::Flex,
    flex_direction: FlexDirection::Column,                                             
    gap: Size { width: length(10.0), height: length(10.0) },    
    size: Size { width: length(200.0), height: length(200.0) },
    ..Default::default()                                                               
}, &[a, b]).unwrap();
                                                                                         
tree.compute_layout(container, Size::MAX_CONTENT).unwrap();     

What went wrong

a.y is correctly 0 in both cases
b.y is 140 but should be 150

Additional information

The equivalent CSS produces the correct result in all major browsers:

.container { display: flex; flex-direction: column; gap: 10px; width: 200px; height: 200px; }
.a { width: 50px; height: 50px; margin-bottom: auto; }
.b { width: 50px; height: 50px; }

The same bug affects row containers with margin-right: auto or margin-left: auto. The
gap disappears whenever any item in the line has an auto margin on the main axis.

[nicoburns]

Thanks for the report! #938 reproduces this as a Taffy generated test. Will try to look into this soon.

[nicoburns]

Relevant code is here: https://github.com/DioxusLabs/taffy/blob/main/src/compute/flexbox.rs#L1660