Yoga Docs: Rename website-next to website (#1613)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1613

So that GitHub links to edit a page point to the right place.

This will fail in OSS build until I switch the directory used by Vercel instance, but I am waiting to do that until ready to land, since that would cause other in progress changes to fail when exported.

Reviewed By: joevilches

Differential Revision: D54837857

fbshipit-source-id: 9bec90232dbe3ec8638568685671185d597fcf2d

website/docs/advanced/containing-block.md

@@ -0,0 +1,89 @@
+---
+sidebar_position: 2
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import Playground from '@site/src/components/Playground';
+
+# 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block),
+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](/docs/styling/position) 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](/docs/styling/position) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
+    or [transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform). This
+    is done by calling the corresponding API for the lanuage you are working in.
+    <Tabs groupId="language">
+    <TabItem value="cpp" label="C/C++">
+    ```cpp
+    YGNodeSetAlwaysFormsContainingBlock(node, true /*alwaysFormsContainingBlock*/);
+    ```
+    </TabItem>
+    <TabItem value="java" label="Java">
+    ```java
+    node.setAlwaysFormsContainingBlock(true /*alwaysFormsContainingBlock*/);
+    ```
+    </TabItem>
+    <TabItem value="ts" label="Typescript">
+    ```typescript
+    node.setAlwaysFormsContainingBlock(true /*alwaysFormsContainingBlock*/);
+    ```
+    </TabItem>
+    </Tabs>
+  - 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`](/docs/getting-started/laying-out-a-tree).
+
+### What the containing block affects
+
+- Any percentage-based lengths will depend on the size of the containing block.
+  Specifically the [height](/docs/styling/width-height), top, and bottom properties will use the height of the
+  containing block. The [width](/docs/styling/width-height), left, right, [margin](/docs/styling/margin-padding-border),
+  and [padding](/docs/styling/margin-padding-border) 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.
+
+<Playground code={`<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>`} />