Разница между flex-grow = 1, шириной: авто и просто шириной: 100%

Question

Учитывая этот 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>

И эти свойства CSS (они действительно внутри медиа-запроса)

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

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

Я не мог просто использовать

main {
   width: 100%;
}

Вместо

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

Визуально они имеют одинаковый эффект.

Здесь работает JSFiddle

Answer 1

Как правило, width:auto заставляет элемент занимать все доступное пространство. На базовом уровне, если какое-то пространство занято, оно занимает остальное. width: 100% с другой стороны, означает, что элемент будет занимать весь родительский элемент.

Flex flex, однако, говорит о том, сколько места занимает элемент. Если внутри родительского элемента есть два дочерних элемента, и вы даете одному из них flex-grow: 2 он будет занимать вдвое больше места, чем другие