Search code examples
css

Difference between initial containing block and viewport


Is there any difference between the two or are they the same? I think they refer to the same thing but in different contexts, but I am not sure so I ask here.


Solution

  • The initial containing block and the viewport, while related to each other, are two distinct concepts.

    The viewport generally refers to the viewable area of a browser window in which a page is rendered on screen. The initial containing block is the logical area within the page in which the root element and everything else is rendered.

    The dimensions of the initial containing block are based on those of the viewport (see section 10.1), but when the content is no longer able to fit the viewport, the viewport is made scrollable so the user can continue to access the rest of the content. Additionally, the new vw, vh, vmin and vmax units are called viewport-percentage units, but they are also described as being relative to the size of the initial containing block.

    Note that the definition of a viewport may vary depending on the device. For example, the viewport of Safari on iOS is very different from that of a desktop browser.