minmax () по умолчанию max

Question

Я попытался установить minmax() для grid-template-rows, и, что интересно, в результате получилось, что ряды сетки растягивались до максимума minmax() вместо минимума.

Как мы могли сделать сеткустроки останутся в минимальном объявленном размере, и позже, если будет добавлено больше контента - строка сетки будет расширена до максимального объявленного размера, а не больше?

Вот пример:

body {
  background: gray;
  border: solid black 1px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: minmax(50px, 150px);
}

aside {
  border-right: solid 1px red;
}

aside.homepage {
  background: blue;
}

<aside></aside>
<aside class="homepage">
  <header></header>
  <main></main>
  <footer></footer>
</aside>
<aside></aside>

Answer 1

В общем, треки будут пытаться достичь своего максимального размера:

Если свободное пространство положительное, распределите его поровну по базовым размерам всех треков, замораживая трекипо мере того, как они достигают своих пределов роста (и продолжают наращивать незамерзающие дорожки по мере необходимости).

(В этом контексте «предел роста» в большинстве случаев является синонимом «максимального размера в minmax ()»).)

Обычно это то, что вы хотите, чтобы трек делал.

Чтобы получить эффект, который вы ищете, где он плотно оборачивается, но не превышает определенного предела,Вы можете немного изменить то, что делаете:

• использовать minmax(50px, min-content) для размеров строк;это облегчит их содержимое, но не позволит им сжаться ниже 50px.
• используйте max-height: 150px на фактических элементах сетки, поэтому они будут максимально увеличены до 150px.

Эти два вместе должны достичь желаемого эффекта.

Answer 2

Понятно, что в основных браузерах по умолчанию используется значение max в функции minmax().

В спецификации не ясно, как это имеет значение - min или max по умолчанию?- должен обрабатываться:

minmax()

Определяет диапазон размеров, больший или равный мин и меньше или равно max .

Если max , то max игнорируется и minmax(min,max) рассматривается как мин .

Как максимум, значение <flex> устанавливает коэффициент гибкости дорожки;как минимум, оно недопустимо.

Возможно, в этом поведении есть еще кое-что, чего я еще не обнаружил в алгоритме определения размера дорожки .

ВотАльтернативный подход к проблеме:

• установите высоту строки на auto (основанная на содержимом высота)
• управляйте минимальной и максимальной высотой элемента сетки

body {
  background: gray;
  border: solid black 1px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;  /* adjustment */
}

aside {
  border-right: solid 1px red;
}

aside.homepage {
  background: blue;
  min-height: 50px;   /* new */
  max-height: 150px;  /* new */
}

<aside>aside</aside>
<aside class="homepage">
  <header>header</header>
  <main>main</main>
  <footer>footer</footer>
</aside>
<aside>aside</aside>