Some mental model explanation on grow / scrollable props

Summary: ^

Reviewed By: jknoxville

Differential Revision: D28059213

fbshipit-source-id: d4bc09d5765ac667e73a9d8c97aaa7f266d77f84

desktop/app/src/sandy-chrome/SandyDesignSystem.tsx

@@ -55,6 +55,21 @@ export default function SandyDesignSystem() {
               Avoid using <code>width / height: 100%</code>, use{' '}
               <code>Layout.Container</code> instead.
             </li>
+            <li>
+              In general, components that have a <code>grow</code> property will
+              grow to use the full height of their <em>parents</em> if{' '}
+              <code>true</code>. In contrast, if grow is set to{' '}
+              <code>false</code> components will use their natural size, based
+              on their <em>children</em>.
+            </li>
+            <li>
+              The other important property here is <em>scrollable</em>. If an
+              element supports this property, setting it will imply{' '}
+              <code>grow</code>, and the element will show a scrollbar if
+              needed. Setting <code>scrollabe</code> to <code>false</code>{' '}
+              causes the element to always use its natural size, growing or
+              shrinking based on the contents rather than the parent.
+            </li>
           </ul>
         </Card>
         <Card title="Colors" bordered={false}>