title: Flutter - Expanded doesn't take all available space when a sibling is Flexible
body: <p>Image of the problem, shown as colored rectangles</p>
  
  <p><a href="https://i.stack.imgur.com/bFMk4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bFMk4.png" alt="SNAP PROBLEM"></a></p>
  
  <p>I want the first child of Column to be Flexible and the second to take up the entire remaining space. Apparently, this does not work.</p>
  
  <p>I'm now aware that this is the expected behavior. I would appreciate a workaround. </p>
  
  <p>I've tried using FittedBox on the first child instead of Flexible, but it didn't work as the content of the first child has unbounded width.</p>
  
  <pre class="lang-dart prettyprint-override"><code>SizedBox(
    height: 300,
    width: 50,
    child: Container(
      color: Colors.black,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: &lt;Widget&gt;[
          Flexible(
            child: Container(
              height: 100,
              color: Colors.red,
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.blue,
            ),
          ),
        ],
      ),
    ),
  );
  </code></pre>
  
  <p>I want to make the first child (i.e. A TextField) Flexible so that if the height gets too small, there are no ugly yellow-black overflow bars.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>Below image shows what I really want to do, but it has the overflow issue because the first child isn't flexible.</p>
  
  <p><a href="https://i.stack.imgur.com/ojkda.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ojkda.gif" alt="what i wants"></a></p>
  
  <p>shows what happens when I do use Flexible.</p>
  
  <p><a href="https://i.stack.imgur.com/STGQb.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/STGQb.gif" alt="snap"></a></p>
  
  <p>I'm using AnimatedContainer to change the height. I prefer not to use SizeTransition if possible.</p>