Skip to main content

Containing block

Often times certain properties depend on a node beyond the one it is applied to. An example of this is percentage lengths like width: 50% which will set the width of a node to 50% of some other length. That other length is determined by the size of the containing block. A containing block is not a Yoga-specific concept and exists in the web, but since Yoga only implements a subset of web browser capabilities the behavior of containing blocks is much more streamlined and it is helpful to frame it differently.

Identifying the containing block of a node​

  • If the position type of a node is static or relative then the containing block is always the content box of the parent. This is because in Yoga every node is a flex container and therefore establishes a formatting context which would form a containing block on the web. The content box is formed by the node without margin, padding, or borders.
  • If the position type of a node is absolute then the containing block will be the padding box (the content box plus padding) of any of:
    • The nearest non-static ancestor.
    • The nearest ancestor which is configured to always form a containing block. This is helpful for supporting things outside of Yoga which would form a containing block on the web, such as filters or transforms. This is done by calling the corresponding API for the language you are working in. 
      YGNodeSetAlwaysFormsContainingBlock(node, true /*alwaysFormsContainingBlock*/);
    • The root if none of the above apply. Note that this is different from the web which has the notion of the initial containing block that depends on the size of the viewport.
  • If the node in question is the root then there is no containing block, but it will use the availableWidth and availableHeight that is passed in to the call to CalculateLayout.

What the containing block affects​

  • Any percentage-based lengths will depend on the size of the containing block. Specifically the height, top, and bottom properties will use the height of the containing block. The width, left, right, margin, and padding will use the width of the containing block.
  • Any insets (left, right, top, bottom, etc.) applied to absolute nodes will be relative to the corresponding edge of the containing block.
<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 200,
      padding: 10
    }}>
    <Node
      style={{
        height: 100,
        width: 100,
        position: 'static'
      }}>
      <Node
        style={{
          height: 25,
          width: '50%',
          bottom: 10,
          position: 'absolute'
        }}
      />
    </Node>
  </Node>
</Layout>