How do a flexLayout auto width? - xamarin.forms

Question

I want to make the flexlayout auto adjust it's width.
When I do not use flexlayout but only lable
<Frame BackgroundColor="#5fb878" Padding="10" HasShadow="false" HorizontalOptions="EndAndExpand" Margin="0" Grid.Column="1">
<Label Text="测试员013号" TextColor="#ffffff" FontSize="18"/>
</Frame>
Yes it auto fits the lable's size.but when I add the flexlayout it auto take the max width as it's width:
<Frame BackgroundColor="#5fb878" Padding="10" HasShadow="false" HorizontalOptions="EndAndExpand" Margin="0" Grid.Column="1">
<FlexLayout Direction="Row">
<Label Text="测试员013号" TextColor="#ffffff" FontSize="18"/>
</FlexLayout>
</Frame>
since I will add several views in the frame not only a lable.
Is there anyway to make the frame auto fit the total width of all the views?

Answer 1

It seems you used Grid to display this Frame directly and it will make it take all the space of the second column. You can wrap it with an extra StackLayout to fix that:
<ContentPage.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<StackLayout Orientation="Horizontal">
<Frame BackgroundColor="#5fb878" Padding="10" HasShadow="false" HorizontalOptions="EndAndExpand" Margin="0" Grid.Column="1">
<FlexLayout Direction="Row">
<Label Text="测试员013号" TextColor="#ffffff" FontSize="18" />
</FlexLayout>
</Frame>
</StackLayout>
</Grid>
</ContentPage.Content>
However, I noticed that you only utilized the FlexLayout's Direction feature, I think StackLayout may be a better choice:
<ContentPage.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Frame BackgroundColor="#5fb878" Padding="10" HasShadow="false" HorizontalOptions="EndAndExpand" Margin="0" Grid.Column="1">
<StackLayout Orientation="Horizontal">
<Label Text="测试员013号" TextColor="#ffffff" FontSize="18" />
<Label Text="second label"/>
</StackLayout>
</Frame>
</Grid>
</ContentPage.Content>