flex-grow = 1, width: auto 和 just width: 100% 之间的区别答案

【问题标题】：Difference between flex-grow = 1, width: auto and just width: 100%flex-grow = 1, width: auto 和 just width: 100% 之间的区别
【发布时间】：2016-10-19 19:02:38
【问题描述】：

鉴于此 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;
}

在视觉上，它们具有相同的效果。

这里，a working JSFiddle

【问题讨论】：

标签： html css flexbox off-canvas-menu

【解决方案1】：

通常，width:auto 使元素占据所有可用空间。在基本层面上，如果某些空间被占用，它会占用其余空间。另一方面，width: 100% 意味着该元素将占据其整个父元素。

然而，Flex 增长表示元素占用了多少空间。如果一个父元素中有两个子元素，并且你给其中一个元素一个flex-grow: 2，它将占据另一个元素的两倍

【讨论】：