css - 当容器被赋予最大尺寸时，为什么灵活网格会失去灵活性？

Question

我有一个网格容器，它生成一个包含尽可能多的300px列的网格。它也是一个弹性项目，flex: 1用于填充其父项。

请注意，弹性项目的最小尺寸min-content默认为 ，0不像流布局中那样。这会产生循环依赖，因为容器的最小大小取决于网格的大小，而网格的大小取决于容器的大小。

然而，这似乎并不重要，因为灵活的网格列很好地回流。至少在我设置最大尺寸之前。一旦我设置了最大尺寸，min-content就不再重新计算，并保持在当时网格的任何尺寸。反过来，容器不再缩小，网格也不会重新计算其列。

这是为什么？

这是一个最小的例子来说明这个问题。启用时缩小屏幕尺寸max-width，禁用时缩小一次。一旦列重排，一次不重排。这在所有主要浏览器中始终如一地发生。

body {
   display: flex;
}

.container {
  border: 1px solid red;
  flex: 1;
  /* vvvv TOGGLE ME vvvvv */
  max-width: 700px;
  /* ^^^^^^^^^^^^^^^^^^^^ */
  display: grid;
  grid-template-columns: repeat(auto-fit, 300px);
  gap: 1rem;
}

.item {
  padding: 2rem 0;
  background-color: cornflowerblue;
  border: 1px solid blue;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

标签： cssflexboxcss-grid