Having problems laying out my Flexbox UI, things are overlapping when I dont want them to

[sleek forge]

I avent used flexbox stuff before, but i have used CSS in the past. Im trying to understand why my boxes are overlapping in the corners, Ive tried seperating the parent/children out in multiple ways, but I get the same result. Maybe its the position_type, but removing that just shoves everything right next to each other, eve if one node is suppose to go 100% of the way across the width of the screen. Can anyone give me an idea of what Im doing wrong here?

in this example, I want the yellow rectangle below the red one, and the purple and green to be stacked within the yellow one.

        display: Display::Flex,
        width: Val::Percent(100.0),
        height: Val::Percent(100.0),
        ..default()
    })
    .with_children(|parent|
    {
        parent.spawn(Node {position_type: PositionType::Absolute, flex_direction: FlexDirection::Row, width: Val::Percent(100.), height: Val::Percent(7.8), padding: UiRect::bottom(Val::Px(5.)), ..default()});
        parent.spawn(Node {position_type: PositionType::Absolute, flex_direction: FlexDirection::Column, width: Val::Percent(19.), height: Val::Percent(80.), ..default()})
        .with_children(|parent|
        {
            parent.spawn(Node {position_type: PositionType::Absolute, flex_direction: FlexDirection::Column, width: Val::Percent(100.), height: Val::Percent(7.8), ..default()});
            
        })
        .with_children(|parent|
        {
            parent.spawn(Node {position_type: PositionType::Absolute, flex_direction: FlexDirection::Column, width: Val::Percent(15.0), height: Val::Percent(10.0), ..default()});
        });
    }); ```

[pearl niche]

Position Type::Absolute will not take in acount sinbling nodes

so all your nodes have, top: Val::Px(0.), left: Val::Px(0.) and therefore will be ate the top left

there is one node that you are calling with_children twice

either the with_children is on the wrong node, or you can merge the 2 with_children into one

you want this, right?

[sleek forge]

exactly, thats what im looking for

[pearl niche]

commands.spawn(
  Node {
     width: Val::Percent(100.0),
     height: Val::Percent(100.0),
     flex_direction: FlexDirection::Column,
    ..Default::default()
  }
).with_children(|parent| {
  // Red
  parent.spawn(Node {
    width: Val::Percent(100.),
    height: Val::Percent(7.8),
    padding: UiRect::bottom(Val::Px(5.)),
    ..default()
  });
  // Yellow
  parent.spawn(Node {
    width: Val::Percent(19.),
    height: Val::Percent(80.),
    flex_direction: FlexDirection::Column,
    ..default()
  }).with_children(|parent| {
      // Purple
      parent.spawn(Node {
        width: Val::Percent(100.),
        height: Val::Percent(7.8),
        ..default()
      });
      // Green
      parent.spawn(Node {
        width: Val::Percent(15.0),
        height: Val::Percent(10.0),
        ..default()
      });
  });
    ```

the problem with the node not being the correct width is that is wants to be based on the content inside it

[sleek forge]

Yes, thats perfect. Okay, I understand, it really was just my failure in setting up the parent/child hierarchy...thank you so much for your help

[pearl niche]

did it work with just that?

[sleek forge]

Yeah, this layout looks pretty much exactly like what I was going for originally

[pearl niche]

the sizes are also correct?

because there is almost no difference between your code and mine, i just removed the position_type

[sleek forge]

Well the sizes are still WIP just due to the UI assets Im alisning. But I needed nodes to line up correctly before I could do that...too many things were getting lost under the main part of my UI

But in general this is what I wanted

[pearl niche]

gg

[sleek forge]

really appreciate it