Why does width:auto behave differently than height:auto? - html

Question

I don't get the auto value. If applied to height it will take on the child's height, but if applied to width it will take on the parent's width.
There are no MDN posts on the auto value itself, and Google yields "100% VS auto" hits rather than "width:auto VS height:auto" hits.
For my current needs I would like an element to expand to its child's width, but in general I wish to know what is the deal with auto.
.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>
jsFiddle / jsBin

Answer 1

'auto' doesn't even always behave the same way for the width property and the height property respectively. It can have different behaviors for the width property not only depending on the element's display type, but also depending on the value of other properties for the same display type. That's why it's called 'auto' — from my answer here,
The value of said property is adjusted automatically according to the content or the context of the element.
Based on your description I'm assuming your question is in the context of block layout. Block layout consists of a series of block-level boxes stacked vertically in normal flow.
So a block container box, by default, only has to grow tall enough to contain its descendants stacked vertically. And since block-level boxes never stack horizontally in normal flow, there's no reason they can't stretch to the full width of their containing block. (They don't even need to shrink to accommodate floats in the same block formatting context, though the line boxes inside them do, but that's a separate topic altogether.)
And that's why, in block layout, an auto height is based on the total height of descendants and an auto width is based on the containing block width.