当增加整个桌子的高度时，使桌子的行高不变

Question

当我增加桌子高度时，所有行的大小都会调整，并且额外的高度会平均分配。其中。

问题

是否可以使一行（在我的示例中为带有标题的行）始终保持在最小高度？打个比方，我认为它是在Flex项目上指定flex-grow: 0。

没有固定高度

我不想将该行设置为固定的高度（例如，将其设置在height: <fixed value in px>上），只需将其高度设置为呈现所有内容的自然最小值即可。

代码

FIDDLE及其示例代码。下面的屏幕截图。

我想使右表（.Table-Row--NotResizable）中的第一行与左表中的第一行具有相同的高度。

HTML

<div class="TableDisplay">
  <table class="Table Table--Natural">
    <tr>
      <th>Artist</th>
      <th>Song</th>
    </tr>
    <tr>
      <td>Prince</td>
      <td>Kiss</td>
    </tr>
      <tr>
      <td>Bob Dylan</td>
      <td>Idiot Wind</td>
    </tr>
  </table>

  <table class="Table Table--Full">
    <tr class="Table-Row--NotResizable">
      <th>Artist</th>
      <th>Song</th>
    </tr>
    <tr>
      <td>Prince</td>
      <td>Kiss</td>
    </tr>
      <tr>
      <td>Bob Dylan</td>
      <td>Idiot Wind</td>
    </tr>
  </table>
</div>

CSS

html,
body {
  height: 100%;
  min-height: 100%;
}

.TableDisplay {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100%;
}

.Table {
  height: 100%;
  border-collapse: collapse;
}

.Table td,
.Table th {
  border: 1px solid black;
}

.Table--Full {
  height: 100%;
}

.Table--Natural {
  height: auto;
}

/* Make this row do not participate in height changes */
.Table-Row--NotResizable {
   /* ??? */
}

Answer 1

实际上，以px为单位的固定值正是您应该使用的：

.Table-Row--NotResizable {
    height: 1px;
}

如果将其设置为1px，则浏览器会将其大小调整为恰好适合内容的大小。表格内容必须适合表格单元格，因此高度不能变小，并且任何（非空）内容都将大于1px，也不会大于所需的最小值。