Почему разная высота строки в 4-й строке меняет распределение высоты между первыми тремя строками? ⇐ Html

[Anonymous]

У меня есть сетка с двумя столбцами и 4 строками. Области сетки следующие:

Код: Выделить всё

grid-template-areas:
"v p"
"v o"
"v t"
"m t";

У меня есть один предмет на каждую область. Итак, мой элемент v (видео) в левом верхнем углу имеет фиксированную относительно большую высоту и охватывает первые три строки. Слева под ним есть один небольшой элемент фиксированной высоты m. Справа у меня есть 2 небольших предмета фиксированной высоты p и o. Ниже элемент t должен занимать всю оставшуюся высоту v плюс высоту m. Я пытался дать распределение по высоте строк просто следующим образом:

Код: Выделить всё

grid-template-rows: repeat(4, min-content);

Моя логика заключалась в следующем: чтобы соответствовать минимальному содержимому, первая строка может сжиматься до высоты элемента в p, аналогично вторая может сжиматься до высоты элемента в o. Только третий должен быть достаточно большим, чтобы соответствовать видео (элемент в v) и, таким образом, соответствующим образом масштабировать элемент в t (расшифровка, у которой нет фиксированной высоты).
Однако этого не происходит. Вместо этого высота видео, кажется, делится на три для первых трех строк.
Однако, я меняю шаблон только в четвертой (!) строке на:

Код: Выделить всё

grid-template-rows: repeat(3, min-content) 1fr;

Распределение высот в первых трех строках внезапно становится таким, каким мне хотелось бы. Это изменение результата не имеет для меня никакого смысла.
Ниже приведены два фрагмента, которые идентичны, за исключением приведенных выше строк.
Мой вопрос: могу ли я добиться распределения по высоте первых трех строк, как во втором фрагменте, но не масштабировать последнюю строку с помощью 1fr (чего мне не нужно по другим причинам (*))? И чем можно объяснить разницу в результатах двух фрагментов? Для меня это похоже на ошибку...
Примечание: решение, которое я ищу, должно оставаться чистым сеточным решением, то есть не заключать некоторые элементы в дополнительный элемент div. Также я бы предпочел не прописывать минимальную высоту элементов явно в определении сетки-шаблона-строк, чтобы не иметь избыточных размеров в нескольких местах.
(*) В качестве ответа на вопрос в комментариях: этот фрагмент является лишь частью моего фактического макета. Я попытался извлечь минимальную сетку, где проблема становится очевидной. В моей реальной полной сетке у меня есть дополнительные строки, и только одну из них я действительно хочу масштабировать с помощью 1fr, когда высота контейнера превышает сумму его содержимого (скажем, 100vh). И если 1fr находится не в 4-й строке, как здесь, а в 5-й или 6-й (как я хочу в моем случае), влияние на распределение высоты первых трех строк уже не будет таким же...

Код: Выделить всё

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(4, 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;
}

Код: Выделить всё

Video
Metadata
Preview-Select
Transcript
Optional

Код: Выделить всё

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(3, min-content) 1fr;
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;
}

Код: Выделить всё

Video
Metadata
Preview-Select
Transcript
Optional

Подробнее здесь: https://stackoverflow.com/questions/798 ... istributio