A flex column nested inside a flex row results in unexpected layout calculation

## Bevy version

0.6.1

## Operating system & version

Windows 11

## What you did

I compiled and ran this code (when a valid font)
```rust
use bevy::prelude::*;

fn main() {
App::new()
.add_plugins(DefaultPlugins)
.add_startup_system(setup_ui)
.run();
}

fn setup_ui(mut c: Commands, assets: Res) {
c.spawn_bundle(UiCameraBundle::default());

let style = TextStyle {
font: assets.load("Karla-VariableFont_wght.ttf"),
font_size: 50.0,
..Default::default()
};

let label = |s: &'static str| TextBundle {
text: Text::with_section(s, style.clone(), Default::default()),
..Default::default()
};

fn row() -> NodeBundle {
NodeBundle {
style: Style {
flex_direction: FlexDirection::Row,
..Default::default()
},
color: Color::NONE.into(),
..Default::default()
}
}

fn column() -> NodeBundle {
NodeBundle {
style: Style {
flex_direction: FlexDirection::Column,
..Default::default()
},
color: Color::NONE.into(),
..Default::default()
}
};

c.spawn_bundle(row()).with_children(|c| {
c.spawn_bundle(label("-"));

c.spawn_bundle(column()).with_children(|c| {
c.spawn_bundle(label("/"));
c.spawn_bundle(label("\\"));
});

c.spawn_bundle(label("|"));
});
}
```

## What you expected to happen

I expected a vertically reversed version of this html
```html

.row {
display: flex;
flex-direction: row;
}

.col {
display: flex;
flex-direction: column;
}

```
which looks like this

## What actually happened

This is what bevy renders

The row flex was ignored, and the column goes off the screen. Elements after the column are also missing.

## Additional information

If I remove the children of the column, but keep the column itself there the row works fine. It looks like the column having content seems to break the row calculation.