CSS疑难：固定高度父元素下后代影响远祖元素高度

问题描述 #

为何直接父元素.column设置固定55px高度后，其子元素甚至嵌套子元素（如img）仍会影响远祖元素.row的高度？

示例代码 #

HTML代码

<table>
  <tr class="row">
    <td>text</td>
    <td class="column">
      <div id="problem1"></div>
      <div class="text">foo</div>
    </td>
  </tr>
  <tr class="row">
    <td>text</td>
    <td class="column">
      <div id="problem2">
        <img>
      </div>
      <div class="text">foo</div>
    </td>
  </tr>
</table>

CSS代码

.row { background-color: #aaa; }
.column { display: flex; align-items: center; width: 500px; height: 55px; background-color: #888; }
#problem1 { background-color: red; height: 200px; width: 10px; }
#problem2 { background-color: blue; height: 200px; width: 20px; }
#problem2 img { background-color: green; height: 200px; width: 10px; }

预期.row高度跟随.column的固定55px，但实际.row被后代元素撑开。第一行中.column的直接子元素影响了.row高度；第二行中嵌套的img决定了.row最终高度，将img改为div则无此问题。此外，给.row设置小于后代高度的height甚至加!important也无效，仿佛后代高度优先级更高。此前认为HTML元素仅能影响直接父元素尺寸，除非父元素无固定尺寸，此现象令人困惑，恳请解释或提供相关技术资源。

问题解答 #

这事儿核心在于表格元素的特殊布局规则和Flex容器的溢出处理逻辑，咱们一步步拆解清楚：

1. 表格单元格(<td>)的「内容优先」特性 #

你给.column（也就是<td>标签）设置了height:55px，但表格单元格的高度属性本质更像「最小高度」，而非严格的固定高度。只要单元格内的内容总高度超过这个值，单元格就会自动被撑开——这是HTML表格的原生布局规则，优先级非常高，哪怕你给.row（<tr>）加height甚至!important都没用，因为表格布局始终以内容尺寸为核心依据。

2. Flex容器的默认溢出行为 #

.column设置了display:flex，但Flex容器默认的overflow属性是visible，也就是不会裁剪超出容器范围的内容。这意味着哪怕容器本身有固定高度，里面的子元素（比如#problem1、#problem2）超出的部分依然会「向外延伸」，而表格单元格会把这些超出的内容也算进自己的尺寸计算里，最终带动.row的高度被撑大。

3. 为什么img和div表现有差异？ #

你提到把img换成div就没问题？其实仔细看代码，#problem2本身就有200px高度，不管里面是img还是div，只要.column没处理溢出，表格单元格都会被撑开。不过img作为替换元素，它的尺寸计算逻辑和普通块级元素略有不同（比如默认尺寸规则），可能导致它的溢出表现更明显，但本质原因还是一样的——溢出内容没被裁剪。

解决方法：给Flex容器添加溢出裁剪 #

要让.row严格保持55px高度，只需要给.column加上overflow:hidden属性，让容器裁剪掉超出的内容：

.column {
  display: flex;
  align-items: center;
  width: 500px;
  height: 55px;
  background-color: #888;
  overflow: hidden; /* 关键：裁剪超出容器的内容 */
}

这样一来，.column里超出55px的部分会被隐藏，表格单元格不会再被撑开，.row的高度自然就稳定在55px了。

补充：纠正尺寸影响的认知误区 #

你之前认为「元素仅能影响直接父元素尺寸，除非父元素无固定尺寸」，这个结论在普通块级元素的布局中是成立的，但表格元素是例外——表格的行、单元格有一套独立的布局优先级规则。另外，Flex容器如果没设置溢出裁剪，超出的内容也会影响父元素（尤其是像表格这种对内容敏感的容器）。

内容的提问来源于stack exchange，提问作者Nekomune