title: Why does nested display:grid kill performance (but flex does not)?
body: <p>I have a relatively simple layout situation that seems to drastically lose performance when using <code>display: grid</code>.</p>
  <p>Sandbox link: <a href="https://codesandbox.io/s/nervous-albattani-3gnx6" rel="nofollow noreferrer">https://codesandbox.io/s/nervous-albattani-3gnx6</a></p>
  <p>I have a header and a child container, which will recursively render the main component if the option is checked. Performance dips around depth=7, and will be essentially unusable by depth=10. More complex examples will fail much earlier.</p>
  <p>What I'm having trouble understanding is why changing</p>
  <pre class="lang-css prettyprint-override"><code>display: grid;
  </code></pre>
  <p>to</p>
  <pre class="lang-css prettyprint-override"><code>display: flex;
  flex-direction: column;
  </code></pre>
  <p>has absolutely no issue, even up to depth=50+. I've tried changing grid parameters to behave just like flex would, without any difference. I would imagine that the layout logic behind the scenes for the two would be near identical for this case?</p>
  <p>I'm using modern hardware, and tested in chrome-89, firefox-86.</p>