違い、幅：自動とだけは、幅：このHTMLを考えると100％

Question

：

<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

Answer 1

通常、width:autoは、要素がすべての利用可能なスペースを占有します。基本的なレベルでは、あるスペースが占有されていれば、それは残りのスペースを占有します。一方、width: 100%は、要素がその親全体を占有することを意味します。

しかし、Flexは、要素がどれだけのスペースを占めているかを示します。親の内部に2つの子要素があり、それらのうちの1つにflex-grow: 2を割り当てると、それは他の要素の2倍の領域を占有します。