title: Expanded and flexible not filling entire row
body: <p>Hello I have the below code</p>
  <pre><code>  @override
    Widget build(BuildContext context) {
      return Scaffold(
        backgroundColor: Colors.white,
        body:
         Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Row(
              mainAxisSize: MainAxisSize.max,
              children: [
               // FlexibleWidget(),
                ExpandedWidget(),
                FlexibleWidget(),
              ],
            ),
            Row(
              children: [
                ExpandedWidget(),
                ExpandedWidget(),
              ],
            ),
            Row(mainAxisSize: MainAxisSize.min,
              children: [
                FlexibleWidget(),
                FlexibleWidget(),
              ],
            ),
            Row(mainAxisSize: MainAxisSize.min,
              children: [
                FlexibleWidget(),
                ExpandedWidget(),
              ],
            ),
          ],
       ),
      );
    }
  }
  
  class ExpandedWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Expanded(
        child: Container(
          decoration: BoxDecoration(
            color: Colors.green,
            border: Border.all(color: Colors.white),
          ),
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(
              'Expanded',
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
          ),
        ),
      );
    }
  }
  
  class FlexibleWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Flexible(
        child: Container(
          decoration: BoxDecoration(
            color: Colors.red,
            border: Border.all(color: Colors.white),
          ),
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(
              'Flexible',
              style: TextStyle(color: Colors.black, fontSize: 24),
            ),
          ),
        ),
      );
    }
  }
  </code></pre>
  <p>And the result is this:</p>
  <p><a href="https://i.stack.imgur.com/DWZyQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DWZyQ.png" alt="Expanded Flexible" /></a></p>
  <p>Shoudln't the first container fill the space left after the flexible widget is set? Since it also belongs to a column with a child of 2 expanded widgets, the column width size should be the entire screen. That means the row should be the entire screen too. I would have expected the expanded green widget in the first row to fill the row until there is no white left like the image below:</p>
  <p><a href="https://i.stack.imgur.com/KEYqO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KEYqO.png" alt="expanded" /></a></p>
  <p>Instead it only fills half the page. Can anyone explain this behaviour?</p>