Skip to content

aspect_ratio is not respected in flex layouts #804

Open
@dminikm

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

<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.

Expected result:
Image

Taffy (0.5 via Bevy):
Image

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions