Unexpected extra blank space

[lomirus]

Bevy version

0.16.0

What you did

[dependencies.bevy]
version = "0.16.0"
default-features = false
features = ["dynamic_linking", "bevy_ui", "bevy_winit", "bevy_ui_debug", "default_font"]

use bevy::prelude::*;

const BAR_WIDTH: f32 = 250.0;

fn init(mut commands: Commands) {
    commands.spawn((Camera3d::default(), IsDefaultUiCamera));

    commands.spawn((
        Node {
            align_items: AlignItems::Center,
            ..default()
        },
        children![(
            Node {
                flex_direction: FlexDirection::Column,
                width: Val::Px(BAR_WIDTH),
                ..default()
            },
            BackgroundColor(Color::WHITE),
            children![
                (
                    Text::new("Jan 1, 2000 01:00"),
                    TextFont {
                        font_size: 20.0,
                        ..default()
                    },
                    TextColor::from(Color::BLACK),
                ),
                (
                    Node {
                        width: Val::Px(BAR_WIDTH),
                        height: Val::Px(24.0),
                        ..default()
                    },
                    BackgroundColor(Srgba::hex("3ba6a3").unwrap().into()),
                )
            ]
        )],
    ));
}

fn toggle_debug_overlay(
    input: Res<ButtonInput<KeyCode>>,
    mut debug_options: ResMut<UiDebugOptions>,
) {
    if input.just_pressed(KeyCode::Space) {
        debug_options.toggle();
    }
}

fn main() {
    App::new()
        .add_systems(Startup, init)
        .add_systems(Update, toggle_debug_overlay)
        .add_plugins(DefaultPlugins)
        .run();
}

What went wrong

You can see that there is an extra blank area below the teal bar:

However, there is no extra node to support the height.

It should look like this:

Additional information

I found that simply removing AlignItems::Center from the outermost Node fixed the issue. However, AlignItems shouldn't cause this behavior (and it is required in my actual game), so I believe this is likely a bug, and it's related to AlignItems (at least).

Result of self.taffy.print_tree(implicit_viewport_node):

TREE
└──  GRID [x: 0    y: 0    w: 1600 h: 900  content_w: 313  content_h: 150  border: l:0 r:0 t:0 b:0, padding: l:0 r:0 t:0 b:0] (NodeId(4294967301))
    └──  FLEX ROW [x: 0    y: 0    w: 313  h: 150  content_w: 313  content_h: 150  border: l:0 r:0 t:0 b:0, padding: l:0 r:0 t:0 b:0] (NodeId(4294967298))
        └──  FLEX COL [x: 0    y: 0    w: 313  h: 150  content_w: 313  content_h: 60   border: l:0 r:0 t:0 b:0, padding: l:0 r:0 t:0 b:0] (NodeId(4294967300))
            ├──  LEAF [x: 0    y: 0    w: 313  h: 30   content_w: 256  content_h: 30   border: l:0 r:0 t:0 b:0, padding: l:0 r:0 t:0 b:0] (NodeId(4294967299))
            └──  LEAF [x: 0    y: 30   w: 313  h: 30   content_w: 0    content_h: 0    border: l:0 r:0 t:0 b:0, padding: l:0 r:0 t:0 b:0] (NodeId(4294967297))

[tnthung]

Version: 0.15.3

I ran into the same problem with the first layer Node containing AlignItem::Center.

fn create_menu(mut commands: Commands) {
  spawn! { [commands.reborrow()]
    outer (
      Node {
        top: v!(0px),
        left: v!(0px),
        width: v!(100%),
        height: v!(100%),
        justify_content: JustifyContent::Center,
        align_items: AlignItems::Center,
        ..Default::default()
      },
      StateScoped(AppState::Menu),
    );

    outer > (
      Node {
        width: v!(15vw),
        min_width: v!(250px),
        flex_direction: FlexDirection::Column,
        align_items: AlignItems::Stretch,
        justify_content: JustifyContent::Start,
        padding: e!(10px),
        row_gap: v!(10px),

        ..Default::default()
      },
      BackgroundColor(crate::ui_elem::COLOR_BACKGROUND),
      BorderRadius::all(v!(10px)),
    ).[
      b_new      ();
      b_load     ();
      b_continue ();
      b_settings ();

      // spacer
      (Node { height: v!(10px), ..Default::default() });

      b_exit ();

      { // instantiate the menu buttons
        use crate::ui_elem::text_button;

        text_button::install(commands.reborrow(), b_new     , "New Game" , || {});
        text_button::install(commands.reborrow(), b_load    , "Load Game", || {});
        text_button::install(commands.reborrow(), b_continue, "Continue" , || {});
        text_button::install(commands.reborrow(), b_settings, "Settings" , || {});
        text_button::install(commands.reborrow(), b_exit    , "Exit"     , exit_game);
      }
    ]
  }
}

This translate to:
1. Spawn outer entity with Node and StateScoped components.
2. Spawn an anonymous entity with Node, BorderRadius... as the child of outer.
3. Spawn 5 empty entities for buttons and a spacer as the child of the anonymous entity.
4. Style buttons with text_button::install

Macro expansion (probably helps)

{
  let mut spawner = (commands.reborrow());
  let spawner = &mut spawner;
  let outer = {
    let mut entity = spawner.spawn((
      Node {
        top: bevy::ui::Val::Px(0f32),
        left: bevy::ui::Val::Px(0f32),
        width: {
          bevy::ui::Val::Percent;
          bevy::ui::Val::Percent(100f32)
        },
        height: {
          bevy::ui::Val::Percent;
          bevy::ui::Val::Percent(100f32)
        },
        flex_direction: FlexDirection::Column,
        align_items: AlignItems::Center,
        justify_content: JustifyContent::Center,
        ..Default::default()
      },
      StateScoped(AppState::Menu),
    ));
    let this = entity.id();
    this
  };
  {
    let mut entity = spawner.spawn((
      Node {
        width: bevy::ui::Val::Vw(15f32),
        min_width: bevy::ui::Val::Px(250f32),
        flex_direction: FlexDirection::Column,
        align_items: AlignItems::Stretch,
        justify_content: JustifyContent::Start,
        padding: {
          struct Top;

          struct Right;

          struct Bottom;

          struct Left;

          bevy::ui::UiRect {
            top: bevy::ui::Val::Px(10f32),
            right: bevy::ui::Val::Px(10f32),
            bottom: bevy::ui::Val::Px(10f32),
            left: bevy::ui::Val::Px(10f32),
          }
        },
        row_gap: bevy::ui::Val::Px(10f32),
        ..Default::default()
      },
      BackgroundColor(crate::ui_elem::COLOR_BACKGROUND),
      BorderRadius::all(bevy::ui::Val::Px(10f32)),
    ));
    let this = entity.id();
    entity.set_parent(outer);
    {
      let parent = this;
      let b_new = {
        let mut entity = spawner.spawn(());
        let this = entity.id();
        entity.set_parent(parent);
        this
      };
      let b_load = {
        let mut entity = spawner.spawn(());
        let this = entity.id();
        entity.set_parent(parent);
        this
      };
      let b_continue = {
        let mut entity = spawner.spawn(());
        let this = entity.id();
        entity.set_parent(parent);
        this
      };
      let b_settings = {
        let mut entity = spawner.spawn(());
        let this = entity.id();
        entity.set_parent(parent);
        this
      };
      {
        let mut entity = spawner.spawn(
          (Node {
            height: bevy::ui::Val::Px(10f32),
            ..Default::default()
          }),
        );
        let this = entity.id();
        entity.set_parent(parent);
        this
      };
      let b_exit = {
        let mut entity = spawner.spawn(());
        let this = entity.id();
        entity.set_parent(parent);
        this
      };
      {
        use crate::ui_elem::text_button;
        text_button::install(commands.reborrow(), b_new, "New Game", new_game);
        text_button::install(commands.reborrow(), b_load, "Load Game", load_game);
        text_button::install(
          commands.reborrow(),
          b_continue,
          "Continue",
          continue_game,
        );
        text_button::install(commands.reborrow(), b_settings, "Settings", settings);
        text_button::install(commands.reborrow(), b_exit, "Exit", exit_game);
      }
    };
    this
  };
};

The second layer Node should be responsive to the window resizing which it does, but with a side effect of extra spacing.

20250414-0242-45.7384301.mp4

If you change the flex_direction of outer to be column, the side effect act in a different way.

20250414-0246-55.5051058.mp4