CSS Sub Grid and Container Queries crashing Chrome

Based on below observations and workarounds, I’m guessing the bug is due to subgrid trying to control the layout within a inline-size/size container and the container is not letting it, which then crashes the rendering program. Interestingly if we just set the containment of the container to inline-size without making it a inline-size query container it won’t crash the page, so there must be something else going on causing this problem when making an element a query container. Hence, it might be better to report an issue with Chromium instead of trying to make them work together.

In older Chrome versions such as Chrome 128, though not crashing, the layout within the container simply won’t be affected by the subgrid.

Following this observation, in Chrome 129.0.6668.59 (64bit), you can see that if you add a layout containment via contain, it will behave like older versions that the subgrid won’t be laying out the child elements within it, and the program won’t crash anymore.

One interesting thing is that if you remove layout after the size is calculated via JS, both the reflowed result and the container will behave as expected while not crashing the page.

Note that this is not intended to be a solution but to demonstrate my observation. If you really need to acheive the same result you proably should consider other layout modules or combining some JS.

window.addEventListener("load", function() {
  var list = document.querySelectorAll(".comparison-item");
  for (let el of list) {
    el.style.setProperty('contain', 'inline-size');
  }
});

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.comparison-item {
  grid-row: span 3;
  container-type: inline-size;
  contain: inline-size layout;
  display: grid;
  grid-template-rows: subgrid;
  .span-two {
    grid-row: span 2;
  }
}

button {
  @container (max-width: 460px) {
    color:blue;
  }
}

<div class="comparison-grid">
  <div class="comparison-item ">
    <p class="span-two">Spanning 2 Rows</p>
    <button>Spanning 1 Row</button>
  </div>
  <div class="comparison-item">
    <p>Spanning 1 Row</p>
    <button class="span-two">Spanning 2 Rows</button>
  </div>
</div>