The CSS Propertie contain-intrinsic-block-size

The contain-intrinsic-block-size property defines the natural block-axis size of an element subject to size containment, so it can occupy space in layout when its contents are not rendered. Logical equivalent of contain-intrinsic-height.

.card { contain-intrinsic-block-size: 200px; }

.lazy-card { content-visibility: auto; contain-intrinsic-block-size: auto 400px; }

min:0 max:9999 step:1

units:px | em | rem | vw | vh

noneNo explicit intrinsic inner size in the block axis (default).

autoIf the element has a last remembered size and is skipping its contents, uses the remembered size. Useful together with content-visibility: auto.

CSS Box Sizing Module Level 4

Editor's Draft

W3C MDN

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Show all code

Edit CSS online

The plugin that remembers hundreds of CSS items for you

Every CSS property — in a live demonstration

The bilingual CSS reference

previous next