DioxusLabs / DioxusLabs/taffy

`aspect_ratio` is not respected in flex layouts

Open
#804 5 comments 0 reactions 0 assignees View on GitHub
A-flexbox bug
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:
![Image](https://github.com/user-attachments/assets/eb398965-113e-4eb2-b6dc-8b1f948e3d01)

Taffy (0.5 via Bevy):
![Image](https://github.com/user-attachments/assets/7c7bdb98-4760-4443-bbac-8dfb67fbcd44)

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.