contain-intrinsic-width

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

none

У элемента нет внутренней ширины.

<length>

У элемента задана ширина (<length>).

auto <length>

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

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

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

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

contain-intrinsic-width = 
  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-height
• contain-intrinsic-block-size
• contain-intrinsic-inline-size