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

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

"There are no MDN posts on the auto property itself" That's because auto isn't a property, it's a value, and it's not a CSS-wide keyword like initial or inherit, and it behaves differently for different properties - [for a reason](http://stackoverflow.com/questions/4471850/what-is-the-meaning-of-auto-value-in-a-css-property/4471874#4471874). — BoltClock, May 01 '16 at 16:48
*"I would like an element to expand to its child's width"* you can do that by making the parent as an `inline-block` then it will adapt to its children. — Aziz, May 01 '16 at 16:54

score 3 · Accepted Answer · edited May 23 '17 at 12:32

'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.

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

1 Answers1

Linked