Difference between flex-grow = 1, width: auto and just width: 100%
<p>Given this HTML:</p>

<pre><code>&lt;nav id="drawer" class="dark_blue"&gt;
  &lt;h2&gt;Off Canvas&lt;/h2&gt;
  &lt;p&gt;Click outside the drawer to close&lt;/p&gt;
&lt;/nav&gt;

&lt;main class="light_blue"&gt;
  &lt;a id="menu"&gt;
    &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"&gt;
      &lt;path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"/&gt;
    &lt;/svg&gt;
  &lt;/a&gt;
  &lt;p&gt;Click on the menu icon to open the drawer&lt;/p&gt;
&lt;/main&gt;
</code></pre>

<p>And these CSS properties (they're really inside a media query)</p>

<pre><code>body {
     display: -webkit-flex;
     display: flex;
 }

 main {
     width: auto;
     /* Flex-grow streches the main content to fill all available space.*/
     flex-grow: 1;
 }
</code></pre>

<p>Couldn't I just use</p>

<pre><code>main {
   width: 100%;
}
</code></pre>

<p>Instead of </p>

<pre><code>main {
    width: auto;
    flex-grow: 1;
}
</code></pre>

<p>Visually, they have the same effect.</p>

<p>Here, <a href="https://jsfiddle.net/jorgeas80/hy9L9gwc/1/" rel="nofollow">a working JSFiddle</a></p>