title: Make a Nested Widgets Responsive in Flutter
body: <p>For simplicity, I have a <code>Container</code> and its child is a <code>Column</code>. The <code>Column</code> widget has two more <code>Container</code>.
  Now the root <code>Container</code> is responsive and it resizes according to the screen but its child which is two <code>Container</code> inside <code>Column</code> doesn't resize and thus giving me render overflow. Manually setting <code>MediaQuery.of(context).size</code> to all the children widgets doesn't seem optimal.</p>
  <p>The code,</p>
  <pre><code>Scaffold(
        body: Container(
          height: size.height * 0.3, //size = MediaQuery.of(context).size
          width: size.width * 0.3,
          color: Colors.pinkAccent,
          child: Column(
            children: [
              Container(
                color: Colors.greenAccent,
                height: 100,
                width: 100,
              ),
              Container(
                height: 100,
                width: 100,
                color: Colors.orangeAccent,
              ),
            ],
          ),
        ),
      );
  </code></pre>
  <p><a href="https://i.stack.imgur.com/kDQFa.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kDQFa.gif" alt="enter image description here" /></a></p>
  <p>I am wanting to resize the child <code>Container</code>s along with the parent <code>Container</code>.</p>