Summary
When a flex container (Column) has padding but no fixed height, children with flex_grow > 0 incorrectly grow to fill the padding space. This contradicts CSS Flexbox behavior where flex_grow only distributes available space within the container's content area.
Version
Taffy 0.9.2
Minimal Reproduction
use taffy::prelude::*;
fn main() {
let mut taffy: TaffyTree<()> = TaffyTree::new();
// Column with padding=100, NO fixed height
let column_style = Style {
display: Display::Flex,
flex_direction: FlexDirection::Column,
padding: Rect {
left: length(100.0),
right: length(100.0),
top: length(100.0),
bottom: length(100.0),
},
..Default::default()
};
// Child with flex_grow=1 and explicit height=10
let child1 = taffy.new_leaf(Style {
flex_grow: 1.0,
size: Size { width: length(50.0), height: length(10.0) },
..Default::default()
}).unwrap();
// Child without flex_grow, same height=10
let child2 = taffy.new_leaf(Style {
size: Size { width: length(50.0), height: length(10.0) },
..Default::default()
}).unwrap();
let column = taffy.new_with_children(column_style, &[child1, child2]).unwrap();
taffy.compute_layout(column, Size {
width: AvailableSpace::MaxContent,
height: AvailableSpace::MaxContent,
}).unwrap();
let child1_height = taffy.layout(child1).unwrap().size.height;
let child2_height = taffy.layout(child2).unwrap().size.height;
println!("Child 1 (flex_grow=1): {}px", child1_height); // 200.0
println!("Child 2 (no grow): {}px", child2_height); // 10.0
}
Expected vs Actual
| Child |
Expected |
Actual |
Child 1 (flex_grow=1) |
10px |
200px |
| Child 2 (no grow) |
10px |
10px |
CSS Comparison
The equivalent CSS produces correct behavior (both children have the same height):
<style>
.column {
display: inline-flex;
flex-direction: column;
padding: 100px;
box-sizing: border-box;
/* No height set */
}
.child1 {
flex-grow: 1;
width: 50px;
height: 10px;
background-color: blue;
}
.child2 {
width: 50px;
height: 10px;
background-color: red;
}
</style>
<div class="column">
<div class="child1"></div>
<div class="child2"></div>
</div>
Result in browser: Both children are 10px tall.
Question
Is this the expected behavior when size is auto() or unspecified? We noticed that explicitly setting size: length(0.0) produces the CSS-like result (both children at 10px), but auto() causes the child with flex_grow to expand to padding_top + padding_bottom.
If this is intentional, what is the recommended way to achieve CSS-like "fit-content" behavior for flex containers?
Summary
When a flex container (Column) has padding but no fixed height, children with
flex_grow > 0incorrectly grow to fill the padding space. This contradicts CSS Flexbox behavior whereflex_growonly distributes available space within the container's content area.Version
Taffy 0.9.2
Minimal Reproduction
Expected vs Actual
flex_grow=1)CSS Comparison
The equivalent CSS produces correct behavior (both children have the same height):
Result in browser: Both children are 10px tall.
Question
Is this the expected behavior when
sizeisauto()or unspecified? We noticed that explicitly settingsize: length(0.0)produces the CSS-like result (both children at 10px), butauto()causes the child withflex_growto expand topadding_top + padding_bottom.If this is intentional, what is the recommended way to achieve CSS-like "fit-content" behavior for flex containers?