为什么width：auto行为不同于height：auto？

Question

我没有auto价值。如果应用height它，将采用孩子的身高，但是如果应用width它，将采用父母的身高。

该auto值本身没有MDN帖子，并且Google会生成“ 100％VS自动”匹配，而不是“ width：auto VS height：auto”匹配。

为了满足我当前的需求，我希望将一个元素扩展到其孩子的宽度，但总的来说，我希望知道如何处理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”甚至并不总是以相同的方式分别运行。它的 width 属性可以有不同的行为，不仅取决于元素的显示类型，还取决于同一显示类型的其他属性的值。这就是为什么它在我的回答中被称为“auto”\xe2\x80\ x94，

\n\n

\n

所述属性的值根据元素的内容或上下文自动调整。

\n

\n\n

根据您的描述，我假设您的问题是在块布局的上下文中。块布局由一系列按正常流程垂直堆叠的块级框组成。

\n\n

因此，默认情况下，块容器盒只需长得足够高以容纳其垂直堆叠的后代即可。由于块级盒子在正常流程中永远不会水平堆叠，因此它们没有理由不能拉伸到其包含块的整个宽度。（它们甚至不需要缩小以适应同一块格式化上下文中的浮动，尽管它们内部的行框需要缩小，但这完全是一个单独的主题。）

\n\n

这就是为什么在块布局中，自动高度基于后代的总高度，自动宽度基于包含块的宽度。

\n