Making table row height not changing, when increasing the whole table height

Question

When I increase the table height, all the rows get resized and the additional height is distributed equally. among them.

Question

Is it possible to make a row (in my example the one with headers) always stay at it's minimum height? As an analogy I see it as specifying flex-grow: 0 on a Flex item.

No fixed height

I don't want to make that row fixed height (e.g. set on it height: <fixed value in px>), just make it's height the natural minimum to render all the contents.

Code

FIDDLE with the example code to work on. Screenshot below.

I want to make the first row in the right table (.Table-Row--NotResizable) to be the same height as the first row in the left table.

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

In fact fixed value in px is exactly what you should use:

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

If you set it to 1px then the browser will resize it to exactly the size needed to fit the content. Table content has to fit into table cell, so the height will not be smaller, and as any (non-empty) content will be higher than 1px it will also not be greater than minimum needed.