Open
Description
taffy
version
0.5.2 in bevy
0.7.5 in reproduction
Platform
Rust, Linux, Bevy
What you did
I'm trying to recreate a simple looking layout. Essentially a set of squares that grow or shrink with available space.
Essentially trying to recreate this code:
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<style>
.container {
outline: 1px solid blue;
display: flex;
flex-direction: row;
gap: 8px;
justify-content: center;
align-items: center;
width: 100%;
height: 512px;
}
.item {
outline: 1px solid red;
min-width: 64px;
max-width: 128px;
aspect-ratio: 1;
flex-grow: 1;
flex-shrink: 0;
}
</style>
What went wrong
However, the items only grow on the main flex axis. They remain at 64px on the cross axis.
I've also created the following reproduction in Rust:
use taffy::prelude::*;
#[test]
fn test_flex_aspect() {
let mut tree: TaffyTree<()> = TaffyTree::new();
let children: Vec<_> = (0..8)
.into_iter()
.map(|_| {
tree.new_leaf(Style {
min_size: Size {
width: length(64.0),
height: length(64.0),
},
max_size: Size {
width: length(128.0),
height: length(128.0),
},
flex_grow: 1.0,
flex_shrink: 0.0,
aspect_ratio: Some(1.0),
..Default::default()
})
.unwrap()
})
.collect();
let container = tree
.new_with_children(
Style {
display: Display::Flex,
flex_direction: FlexDirection::Row,
justify_content: Some(JustifyContent::Center),
align_items: Some(AlignItems::Center),
gap: Size {
width: length(8.0),
height: length(8.0),
},
size: Size {
width: length(2048.0),
height: length(512.0),
},
..Default::default()
},
&children,
)
.unwrap();
tree.compute_layout(container, Size::MAX_CONTENT).unwrap();
let first_child = tree.layout(children[0]).unwrap();
assert_eq!(first_child.size.width, first_child.size.height);
}
Running this test gives the following output:
---- test_flex_aspect stdout ----
thread 'test_flex_aspect' panicked at src/main.rs:52:5:
assertion `left == right` failed
left: 128.0
right: 64.0
Note that all of the items have enough space to grow both vertically and horizontally.
Additional information
I've also created a bevy playground example to see the problem in action.
Activity