title: Flutter - How to put two Columns inside a Row, one Column expanded, the other fit its content text?
body: <p>Is there a way to achieve this layout with flutter? With one Column expanded, and the other Column shrink to fit the texts inside, within a Row.</p>
  <p>I'm from a web background, I know I can do it with Flex-grow and Flex-shring along with whitespace:nowrap.</p>
  <p><strong>I would like to achieve this layout</strong></p>
  <p><a href="https://i.stack.imgur.com/7oHCS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7oHCS.jpg" alt="I would like to achieve this layout" /></a></p>
  <p>But in flutter I tried:</p>
  <ol>
  <li>This will give me two equal width columns:</li>
  </ol>
  <pre><code>Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisSize: MainAxisSize.min,
              children: [Text('Monthly Membership'), Text('Subscription')],
            ),
          ),
          Flexible(
            fit: FlexFit.tight,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  '+100',
                  maxLines: 1,
                  softWrap: false,
                  overflow: TextOverflow.fade,
                ),
                Text(
                  '18 Sept 2021',
                  maxLines: 1,
                  softWrap: false,
                  overflow: TextOverflow.fade,
                ),
              ],
            ),
          ),
        ],
      );
  </code></pre>
  <ol start="2">
  <li>This will give an error.</li>
  </ol>
  <blockquote>
  <p>RenderBox was not laid out: RenderFlex#3024f relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE</p>
  </blockquote>
  <pre><code>Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisSize: MainAxisSize.min,
              children: [Text('Monthly Membership'), Text('Subscription')],
            ),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                '+100',
                maxLines: 1,
                softWrap: false,
                overflow: TextOverflow.fade,
              ),
              Text(
                '18 Sept 2021',
                maxLines: 1,
                softWrap: false,
                overflow: TextOverflow.fade,
              ),
            ],
          ),
        ],
      );
  </code></pre>