Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

aspect_ratio is not respected in flex layouts #804

Open
dminikm opened this issue Feb 18, 2025 · 0 comments
Open

aspect_ratio is not respected in flex layouts #804

dminikm opened this issue Feb 18, 2025 · 0 comments
Labels
bug Something isn't working

Comments

@dminikm
Copy link

dminikm commented Feb 18, 2025

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

@dminikm dminikm added the bug Something isn't working label Feb 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant