Text wrapping with Val::Percent

[vringar]

Hey,

I'm trying to build a UI that doesn't use Val::px anywhere to ensure that the UI will scale seamlessly for smaller displays, however I'm running into an issue, when trying to get text wrapping to work.

This is the almost minimal code example I could come up with to show the issue:

use bevy::prelude::*;

fn main() {
    App::new()
        .insert_resource(ClearColor(Color::rgb(0.4, 0.4, 0.4)))
        .insert_resource(WindowDescriptor {
            title: "TextDemo".to_string(),
            vsync: true,
            ..Default::default()
        })
        .insert_resource(Msaa { samples: 4 })
        .add_plugins(DefaultPlugins)
        .add_startup_system(setup)
        .run();
}

fn setup(mut commands: Commands, asset_server: Res<AssetServer>){
    commands.spawn_bundle(UiCameraBundle::default());

    commands
        .spawn_bundle(NodeBundle {
            // Root Panel, covers the entire screen
            style: Style {
                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
                justify_content: JustifyContent::SpaceBetween,
                ..Default::default()
            },
            color: Color::NONE.into(),
            ..Default::default()
        })
        .with_children(|parent| {
            spawn_left_panel(parent, &asset_server);
        });

}

fn spawn_left_panel(parent: &mut ChildBuilder, asset_server: &Res<AssetServer>) {
    parent
        .spawn_bundle(NodeBundle {
            style: Style {
                flex_direction: FlexDirection::ColumnReverse,
                size: Size::new(Val::Percent(20.0), Val::Percent(100.0)),
                ..Default::default()
            },
            color: Color::rgb(0.10, 0.10, 0.10).into(),
            ..Default::default()
        })
        .with_children(|parent| {
            parent
                .spawn_bundle(TextBundle {
                    text: Text::with_section(
                        "This is a super long text, that I would hope would get wrapped. Unfortunately it just breaks out of the box and keeps going",
                        TextStyle {
                            font: asset_server.load("FiraSans-Bold.ttf"),
                            font_size: 20.0,
                            color: Color::rgb(1.0, 1.0, 1.0),
                        },
                        Default::default(),
                    ),
                    style: Style {
                        position: Rect {
                            top: Val::Percent(1.0),
                            left: Val::Percent(2.0),
                            ..Default::default()
                        },
                        max_size: Size::new(Val::Percent(100.0), Val::Undefined),
                        ..Default::default()
                    },
                    ..Default::default()
                });
        });
}

This results in the following display:

I would have assumed that max_size: Size::new(Val::Percent(100.0), Val::Undefined) would mean that the box can't get bigger than its parent. But that is not how it works. Is the error in my mental model, my code or bevy?

[alice-i-cecile]

I would call this a bug; I've created #4009 from this. Unfortunately our upstream dependency flex is responsible for this, and is currently unmaintained :/

[vringar]

That's unfortunate. Should I try to produce an example that only uses flex and report it upstream?
Just so it's documented

[mockersf]

it's not an upstream issue on stretch (Bevy dependency for flex), it's Bevy not handling text wrapping