contain-intrinsic-height

Для элемента могут быть заданы следующие значения.

none

У элемента нет внутренней высоты.

<length>

У элемента задана высота (<length>).

auto <length>

Запомненное значение высоты элемента в "обычном" режиме отрисовки, если оно существует, и элемент пропускает своё содержимое (например, когда он не отображается на экране); в противном случае заданное <length>.

Свойство обычно применяется вместе с элементами, которые могут вызывать содержание размеров, такими как contain: size и content-visibility, а также может быть установлено с помощью contain-intrinsic-size сокращённого свойства.

Содержание размеров позволяет пользовательскому агенту выводить элемент так, как будто у него есть фиксированный размер, предотвращая ненужные перерисовки, избегая повторного рендеринга дочерних элементов для определения фактического размера (чтобы улучшить пользовательский опыт). По умолчанию, содержание размеров рассматривает элементы так, как будто у них нет содержимого, и может обрезать макет таким же образом, как если бы содержимое не имело высоты (или ширины). Свойство contain-intrinsic-height позволяет авторам указать подходящее значение, которое будет использоваться в качестве высоты для макета.

Значение auto <length> позволяет сохранить высоту элемента, если элемент когда-либо отображается в "обычном" режиме (с его дочерними элементами), а затем используется вместо заданной высоты, когда элемент пропускает своё содержимое. Это позволяет элементам, не отображаемым на экране, с content-visibility: auto, получить выгоду от содержания размеров, не требуя от разработчиков такой точности при оценке размера элемента. Запомненное значение не используется, если дочерние элементы рендерятся (если содержание размеров включено, будет использовано <length>).

contain-intrinsic-height = 
  auto? [ none | <length> ]  

Помимо примера ниже, на странице contain-intrinsic-size представлен интерактивный пример, который демонстрирует влияние изменения внутренней ширины и высоты.

В приведенном ниже HTML определен элемент "contained_element", который будет ограничен по размеру и содержит дочерний элемент.

<div id="contained_element">
  <div class="child_element"></div>
</div>

В приведенном ниже CSS устанавливается content-visibility для contained_element в auto, поэтому, если элемент скрыт, он будет ограничен по размеру. Ширина и высота, которые используются при ограничении по размеру, устанавливаются одновременно с помощью contain-intrinsic-width и contain-intrinsic-height соответственно.

#contained_element {
  border: 2px solid green;
  width: 151px;
  content-visibility: auto;
  contain-intrinsic-width: 152px;
  contain-intrinsic-height: 52px;
}
.child_element {
  border: 1px solid red;
  background: blue;
  height: 50px;
  width: 150px;
}

• content-visibility: новое CSS свойство, которое повышает производительность рендеринга (web.dev)
• contain-intrinsic-size
• contain-intrinsic-width
• contain-intrinsic-block-size
• contain-intrinsic-inline-size