width：autoはheight：autoとは異なる動作をするのはなぜですか？

Question

私はauto値を取得しません。 heightに適用された場合、それは子供の身長になりますが、widthに適用されると、親の幅になります。

値autoにはMDN投稿はなく、Googleは「width：auto VS height：auto」ヒットではなく「100％VS auto」ヒットを表示します。

私の現在のニーズについては、要素を子の幅に拡張したいと考えていますが、一般的にはautoとの取引を知りたいと考えています。

jsFiddle/jsBin

.divXS { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: green; 
 
} 
 
    
 
.divXXS { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: yellow; 
 
} 
 
    
 
.divSM { 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
    
 
#Father { 
 
    background: blue; 
 
    border: 3px solid #20295E; 
 
} 
 
    
 
#Mother { 
 
    background: pink; 
 
    border: 3px solid #DB6DBE; 
 
} 
 
    
 
#Daughter { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
    
 
#Son { 
 
    width: auto; 
 
    height: auto; 
 
}

<div class="divSM" id="Mother"> 
 
    <div class="divXS" id="Daughter"> 
 
    <div class="divXXS" id="grandDaughter"></div> 
 
    </div> 
 
</div> 
 

 
<div class="divSM" id="Father"> 
 
    <div class="divXS" id="Son"> 
 
    <div class="divXXS" id="grandSon"></div> 
 
    </div> 
 
</div>

Answer 1

'自動' でも常にwidthプロパティと、それぞれの高さのプロパティで同じように動作しません。 widthプロパティは、要素の表示タイプによって異なるだけでなく、の値に応じて、の同じの種類の他のプロパティに応じて異なる動作を持つことができます。

、私の答えhereからコンテンツや要素の文脈に応じて自動的にを調整したプロパティの値 - それはそれは「自動」と呼ばれる理由です。

あなたの説明に基づいて、あなたの質問はブロックレイアウトのコンテキストにあると仮定しています。ブロックレイアウトは、通常のフローで垂直に積み重ねられた一連のブロックレベルのボックスで構成されています。

ブロックコンテナボックスは、デフォルトでは、子孫を縦に積み重ねるだけの大きさに成長する必要があります。また、ブロックレベルのボックスは通常のフローでは水平に積み重ねられないので、収納ブロックの全幅に伸びない理由はありません。 （行ボックスは、それらの内部で行うものの彼らも、同じブロックフォーマット文脈における山車に対応するために縮小する必要はありませんが、それは全く別のトピックです。）

をそして、それは、ブロックレイアウトでは、なぜです自動高さは子孫の高さの合計に基づいており、自動幅は包含ブロック幅に基づいています。