Question

为什么这些元素会影响远处祖先的高度，即使它的直接父级具有固定的高度？

这里有一个包含两行和两列的简单表：

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

使用此样式表：

.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;
}

我期望的是行的高度跟随最高列的高度。在这种情况下，.column在CSS中的固定高度为55px。

相反，.column的孩子正在影响行的高度。

在第一个示例中，.column的直接子项设置其.row的高度

The first row

这里，红色元素是列的一个子（浅灰色），它是一列，并且具有55px行的固定高度（深灰色）

但是，在第二行中，嵌套子项（在本例中为img）是确定.row的最终高度的子项。奇怪的是，当我将img更改为不同类型的元素（div）时，它不会影响.row的高度。

The second row

这里，HTML层次结构是行＆gt;栏＆gt;蓝色＆gt;绿色

此外，将.row的高度设置为小于影响高度的最大后代将不起作用。即使使用!important作为height属性。就好像后代的高度优先于.row的高度。

直到我遇到这样的情况，我相信HTML元素只能影响其直接父级的维度，而不是超过1级别的祖先（除非维度/属性通过其父级传播而祖先不会有一个固定的高度/宽度）

非常奇怪的结果。如果有人能解释正在发生的事情或指出我正确的资源来了解这种情况，我将不胜感激。

感谢您的时间。

这是一个说明帖子的小提琴：https://jsfiddle.net/u2745hjy/1/

Answer 1

您无法阻止child元素的高度超过parent。相反，您可以height: 100%使用child，这样它的parent就会达到高度。或者您可以将overflow: auto设置为parent，以便scroll的{{1}}高度高于child

Answer 2

删除已应用于列的55px高度。

  .column {
      display: flex;
      align-items: center;
      width: 500px;
      background-color: #888;
    }

HTML Bug？即使是固定身高的父母，某些元素也会影响远古祖先的高度

2 个答案: