`aspect_ratio` is not respected in flex layouts
- Dominant language
- Rust
- Stars
- 3.6k
- Forks
- 222
- Avg merge
- 10h 41m
- Merged PRs (30d)
- 40
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:
[Svelte playground link](https://svelte.dev/playground/e5069d49371740338c57560349138b91?version=5.20.2)
```HTML
.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;
}
```
## 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:
```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](https://learnbevy.com/playground?share=3691b26e55d3c80b78ece9b1c38836b034b66c5114e30fd58049724c9f628cb0) to see the problem in action.
Expected result:

Taffy (0.5 via Bevy):

Contributor guide
Research direction
Start by running the provided Rust test_flex_aspect reproduction and inspect the flex layout path reached by compute_layout. The fix is complete when the aspect-ratio constraint is respected for the flex children and the assertion that each child’s width equals its height passes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- rust
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100