Reports

Long answer (-1):
Has code block (-0.5):
User mentioned (1): @AHaworth
User mentioned (0): @JohnBollinger
Self-answer (0.5):
Low reputation (0.5):

In addition to the solution of @AHaworth and the explanation of the sizing behavior in the answer of @JohnBollinger, I've found in the meantime a different solution by using
grid-template-rows: repeat(2, minmax(min-content, 0px)) repeat(2, min-content)
instead of
grid-template-rows: repeat(4, min-content)
On MDN it says "If max < min, then max is ignored and minmax(min,max) is treated as min." Thus minmax(min-content, 0px) should be equal to min-content, but it seems that for the track-sizing algorithm it is now treated as fixed size instead of intrinsic size. In any case, it works, as one can see in the following snippet:

html, body {
  height: 100vh;
  max-height: 100vh;
  margin: 0px;
}

/* Grid-Container */
#container {
    display:grid;
  grid-template-areas:
    "v p"
    "v o"
    "v t"
    "m t";
  grid-template-columns: 1fr min-content;
  grid-template-rows: repeat(2, minmax(min-content, 0px)) repeat(2, min-content);
    gap: 4px;
    width:100%;
}

/* Grid-Items */
div.grid-item {
    border-color: black;
    border-width: 2px;
    border-style: solid;
    position: relative;
}

#video {
    background-color: green;
  height: 180px;
  grid-area: v;
}
#metadata {
    background-color: yellow;
  height: 30px;
  grid-area: m;
}
#previewSelect {
    background-color: red;
    height:30px;
  grid-area: p;
}
#transcript {
    background-color: blue;
    align-self: stretch;
  grid-area: t;
}
#optional {
    height: 30px;
  grid-area: o;
}

<html>
<body>
    <div id="container" class="l1">
        <div id="video" class="grid-item">Video</div>
        <div id="metadata" class="grid-item">Metadata</div>
        <div id="previewSelect" class="grid-item">Preview-Select</div>
        <div id="transcript" class="grid-item">Transcript</div>
        <div id="optional" class="grid-item">Optional</div>
    </div>
</body>
</html>

79831609