title: How to make FlexLayout's height adjust to its content?
body: <p>In my Xamarin Forms application, I have a list of strings (minimum 1, maximum 4) that I want to display evenly in a column layout. Each column needs to have the same width and the content should expand so that the whole text is wrapped and visible. I know how I can do it using the <code>Grid</code> control using <code>Width=&quot;*&quot;</code> on its columns.</p>
  <p>I want to achieve the same result using <code>FlexLayout</code>, so I can bind the list of strings to <code>BindableLayout</code> and easily add and remove columns (I will not be displaying strings but a more complex layout in each column).</p>
  <p>Using <code>FlexLayout.Grow</code> and <code>FlexLayout.Basis</code> I can get the <code>FlexLayout</code> to display evenly sized columns. The problem is making the <code>FlexLayout</code>'s height fit all the displayed labels. Only the first row of text is displayed.</p>
  <p>Both the <code>Grid</code> and <code>FlexLayout</code> are wrapped in a <code>StackLayout</code>:</p>
  <pre><code>&lt;StackLayout&gt;
      &lt;Grid&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height=&quot;Auto&quot;/&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width=&quot;*&quot;/&gt;
              &lt;ColumnDefinition Width=&quot;*&quot;/&gt;
              &lt;ColumnDefinition Width=&quot;*&quot;/&gt;
              &lt;ColumnDefinition Width=&quot;*&quot;/&gt;
          &lt;/Grid.ColumnDefinitions&gt;
  
          &lt;Label  Text=&quot;First label&quot; Grid.Column=&quot;0&quot; BackgroundColor=&quot;Aqua&quot;
                  LineBreakMode=&quot;WordWrap&quot; /&gt;
  
          &lt;Label Text=&quot;Second label&quot; Grid.Column=&quot;1&quot;  BackgroundColor=&quot;Red&quot;
                 LineBreakMode=&quot;WordWrap&quot; /&gt;
  
          &lt;Label Text=&quot;Third label but with longer text&quot; Grid.Column=&quot;2&quot; BackgroundColor=&quot;Aqua&quot;
                 LineBreakMode=&quot;WordWrap&quot;/&gt;
  
          &lt;Label Text=&quot;Fourth label&quot; BackgroundColor=&quot;Red&quot;
                 Grid.Column=&quot;3&quot;   LineBreakMode=&quot;WordWrap&quot; /&gt;
  
      &lt;/Grid&gt;
      &lt;BoxView BackgroundColor=&quot;Blue&quot;&gt;&lt;/BoxView&gt;
  
      &lt;FlexLayout AlignItems=&quot;Stretch&quot;&gt;
          &lt;Label  Text=&quot;First label&quot; 
                  FlexLayout.Grow=&quot;1&quot; 
                  FlexLayout.Basis=&quot;0&quot; 
                  BackgroundColor=&quot;Aqua&quot;
                  LineBreakMode=&quot;WordWrap&quot; /&gt;
  
          &lt;Label  Text=&quot;Second label&quot; 
                  FlexLayout.Grow=&quot;1&quot; 
                  FlexLayout.Basis=&quot;0&quot; 
                  BackgroundColor=&quot;Red&quot;
                  LineBreakMode=&quot;WordWrap&quot; /&gt;
  
          &lt;Label  Text=&quot;Third label but with longer text&quot; 
                  FlexLayout.Grow=&quot;1&quot; 
                  FlexLayout.Basis=&quot;0&quot; 
                  BackgroundColor=&quot;Aqua&quot;
                  VerticalOptions=&quot;FillAndExpand&quot;
                  LineBreakMode=&quot;WordWrap&quot; /&gt;
  
          &lt;Label  Text=&quot;Fourth label&quot; 
                  FlexLayout.Grow=&quot;1&quot; 
                  FlexLayout.Basis=&quot;0&quot; 
                  BackgroundColor=&quot;Red&quot;
                  LineBreakMode=&quot;WordWrap&quot; /&gt;
  
      &lt;/FlexLayout&gt;
      &lt;BoxView BackgroundColor=&quot;Blue&quot;&gt;&lt;/BoxView&gt;
  &lt;/StackLayout&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/PqBfQ.png" rel="nofollow noreferrer">Grid and FlexLayout displayed</a></p>
  <p>I figured out that when setting the <code>HeightRequest</code> of the <code>FlexLayout</code> to a specific number (e.g. 150), everything works as expected - the row has a height of 150 and all the labels stretch out to fit that. So what I need is somehow specify <code>HeightRequest=&quot;Auto&quot;</code> so that the row fits all the column's content without being set to a specific value</p>
  <p>Is there a way to achieve this?</p>