如何在 CSS 中使 Flex 容器内的网格响应，而不破坏外部 Flex 容器的布局？

Question

我正在尝试使用网格显示柔性显示内的项目列表（这是反应中主应用程序的内部组件）。我能够正确显示，但网格溢出容器外部并与页脚组件重叠。

我的预期结果是容器随着网格上显示的数据而增长，而不会溢出或重叠在其他组件上。

随着列表不断增加，列表会与页脚重叠并超出页脚。

• 如何展开弹性容器而不导致溢出或与页脚重叠？

注意：我尝试过添加垂直滚动条等解决方案，该解决方案有效，但不满足我的要求。

.App {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5% 10%;
}

.footer {
  display: flex;
  justify-content: center;
}

<div class="App">
  <div class="list">
    <article class="grid">
      Display1
    </article>
    
    <article class="grid">
      display2
    </article>
    
    <article class="grid">
      display3
    </article>
  </div>
  
  <div class="footer">
    footer
  </div>
</div>

Answer 1

在 CSS 中创建灵活布局时，通常在 Flex 容器内使用网格。然而，这可能会导致响应能力和溢出问题方面的挑战。让我帮你解决这个问题。

为了使网格具有响应能力，您可以使用 CSS 媒体查询。这些查询使您能够根据屏幕尺寸调整列数。当屏幕宽度发生变化时，

grid

可以相应调整。这是一个例子：

.list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 5% 10%;
}

在此代码中，自动调整允许网格根据可用空间自动调整列数，并且

minmax(200px, 1fr)

设置最小列

width of 200px

，但允许在有更多空间时扩展列。 3. 扩展 Flex 容器：

Flex 容器通常会默认扩展以适应其内容。但是，如果您遇到溢出问题，请考虑在

max-height

容器上设置

flex

或使用 Overflow: auto 在内容超过某个

vertical scrollbar

时添加

height

。这可确保内容保持可访问性，而不会与

footer

重叠。 这是经过这些调整的 CSS 更新版本：

.App {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-height: 100vh; /* Set a max height to prevent excessive growth */
    overflow: auto; /* Add a vertical scrollbar if needed */
}

.list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 5% 10%;
}

.footer {
    display: flex;
    justify-content: center;
}

您可以自定义

minmax

值和其他样式来创建您喜欢的布局并确保响应能力。

用于运行演示的 HTML：

<div class="App">
  <div class="list">
    <article class="grid">
      Display1
    </article>
    
    <article class="grid">
      display2
    </article>
    
    <article class="grid">
      display3
    </article>
  </div>
  
  <div class="footer">
    footer
  </div>
</div>