Difference between flex-grow = 1, width: auto and just width: 100%

Question

Given this HTML:

<nav id="drawer" class="dark_blue">
  <h2>Off Canvas</h2>
  <p>Click outside the drawer to close</p>
</nav>

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

And these CSS properties (they're really inside a media query)

body {
     display: -webkit-flex;
     display: flex;
 }

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

Couldn't I just use

main {
   width: 100%;
}

Instead of

main {
    width: auto;
    flex-grow: 1;
}

Visually, they have the same effect.

Here, a working JSFiddle

http://stackoverflow.com/q/39960047/3597276 – Michael Benjamin Oct 19 '16 at 11:33 — Michael Benjamin, Oct 19 '16 at 11:33
http://stackoverflow.com/q/39884226/3597276 – Michael Benjamin Oct 19 '16 at 11:34 — Michael Benjamin, Oct 19 '16 at 11:34

score 1 · Accepted Answer · answered Oct 19 '16 at 11:02

Typically, width:auto makes the element occupy all available space. At a basic level, if some space is occupied, it occupies the rest. width: 100% on the other hand means that the element will occupy its entire parent.

Flex grow, however, says how much space an element occupies. If there are two child elements inside a parent, and you give one of them a flex-grow: 2 it will occupy twice as much space as the other

Difference between flex-grow = 1, width: auto and just width: 100%

1 Answers1