css - 为什么在子元素仍有向下移动空间的同时，父DIV会调整大小？

抱歉，如果这个问题看起来重复，但是这些解释在某种程度上与我所寻找的不同。

我有一个显示为DIV的table。它有两个DIV作为单元，内部也有它们自己的DIV。

    <div class="theTable">
     <div class="theRow">
      <div class="cell1">
       <div class="cell1Content">
        cell one content
       </div>
      </div>
      <div class="cell2">
       <div class="cell2Content">
        cell two content
       </div>
      </div>
     </div>
    </div>

现在，通过任何方式（例如，编写或更改属性），我都会放大其中一个单元格的内容（例如cell2），而不是从下往上放大内容，并填充父级DIV的区域（是一个单元格），则发生的事情是父DIV实际上从顶部展开。此行为是不希望的。我希望父DIV保持相同大小，并且内容要从底部（向下）调整大小。
我知道可以使用position:relative, top:2em来实现，但这不是我打算做的，因为我不想破坏document的流程，而是一个简单的答案来解决这个问题。
与上面的情况一样，CSS文件是这样的：

.theTable {display:table}
.theRow {display:table-row;}
.cell1 {display:table-cell}
.cell2 {display:table-cell}
.cell1Content {display:block; height:10em; background:blue;}
.cell2Content {display:block; background:yellow; height:5em; margin-top:2em;}

如果您更改最后一行（margin-top:0em），您将看到，更改大小的不仅是子项，还包括父项。我不明白为什么？那该怎么办呢？

最佳答案

因此，您想要的是细胞从底部开始向上生长吗？

这样的事情可以解决它：
http://jsfiddle.net/7y19n8eh/

.theTable {display:table}
.theRow {display:table-row;}
.cell1 {display:table-cell;vertical-align: bottom}
.cell2 {display:table-cell;vertical-align: bottom}
.cell1Content {display:block; height:10em; background:blue;}
.cell2Content {display:block; background:yellow; height:5em; margin-top:2em;}

我所做的就是在单元格中添加了vertical-align：bottom。
vertical-align属性设置元素的垂直对齐方式，并且与所有主流浏览器兼容。

关于css - 为什么在子元素仍有向下移动空间的同时，父DIV会调整大小？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52958194/