contain

Właściwość contain pozwala odgrodzić fragment strony od reszty. Deklarujesz, że to, co dzieje się w środku elementu, nie wpłynie na otoczenie, a przeglądarka może wtedy przeliczać i malować tylko ten fragment. Przydaje się w długich listach, widżetach i panelach, które często się zmieniają.

Rodzaje zawierania można łączyć: size (rozmiar elementu nie zależy od treści), inline-size (to samo tylko dla rozmiaru liniowego), layout (układ w środku nie wpływa na zewnątrz), paint (potomkowie nie rysują się poza elementem) i style (liczniki CSS zmieniane w środku nie działają poza elementem). Skrót content oznacza layout paint style, a strict to wszystkie te trzy razem z size.

Każdy rodzaj ma widoczne skutki uboczne. Przy layout i paint element staje się blokiem zawierającym dla potomków z position: absolute i fixed oraz tworzy nowy kontekst stosu. paint dodatkowo przycina wszystko, co wystaje, podobnie jak overflow: clip. Przy size element bez podanych wymiarów jest mierzony tak, jakby był pusty, więc jego wysokość spada do zera.

Na co dzień rzadko ustawia się contain ręcznie, bo często robią to za Ciebie inne właściwości: container-type włącza zawieranie rozmiaru, a content-visibility: auto włącza zawieranie i dodatkowo pomija renderowanie fragmentów poza ekranem.