如何在 CSS 网格中实现滚动？

Question

我有一个嵌入在 css-grid 中的组件。

在 stack blitz 中，我有一个 3 行的外部网格。其中一行具有最小宽度。如果视口小于最小宽度，如何让它水平滚动？

在中间行中，我有一个组件，它本身使用 2 列网格。列中的 div 有一个最小高度。

我正在寻找的是，如果视口的大小使整个内部组件（红色框）不可见，则红色框是可滚动的。

这是一个堆栈闪电战：

https://stackblitz.com/edit/angular-q4geyk

这是另一个例子：

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.content {
  display: grid;
  grid-template-rows: 2em 1fr 1px;
  grid-gap: 0.5rem;
  height: 20em;
}

.my-panel {
  border: 1 green solid;
  background-color: red;
  padding: 0.25rem;
}

.my-component {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5rem;
  padding: 0.25rem;
  height: 100%;
}

header {
  border: green solid 1px;
  padding: 4px;
}

main {
  border: blue solid 1px;
  padding: 1rem;
}

main div {
  border: red solid 1px;
  height: 100%;
}

footer {
  border-bottom: black solid 1px;
}

<div class="content">
  <header>
    <div>Component Showcase</div>
  </header>

  <main>
    <div>
      <section class="my-component">
        <div class="my-panel">&nbsp;</div>
        <div class="my-panel">&nbsp;</div>
      </section>
    </div>
  </main>

  <footer></footer>
</div>

Answer 1

您在布局方面遇到两个主要问题：

首先，默认情况下，网格项不能小于其内容。默认值是min-width: auto和min-height: auto。因此，该main元素（即 中的网格项app-root）需要覆盖。

添加。min-width: 0​main

更完整的解释在这里：防止内容扩展网格项目

其次，您将两列的红色框设置为：

grid-template-columns: 1fr 1fr

这意味着每列将平等分配容器中的可用空间。如果这些列中没有任何内容，则两列都可以简单地缩小到 0 宽度，而不会触发溢出。因此，没有滚动条。

如果您这样做，也会存在同样的问题：

grid-template-columns: 50% 50%

因此，除非这些列中始终存在强制最小宽度的内容，否则我会推荐这样的内容：

grid-template-columns: minmax(250px, 1fr) minmax(250px, 1fr)

https://stackblitz.com/edit/angular-ortstl?file=src/styles.css

Answer 2

.the_div_you_want_to_scroll {\n    display: grid;\n    align-items: center;\n    grid-auto-flow: row;\n    grid-auto-rows: 25%; /* play with this to change height of the children, 50% will fill half */\n    grid-template-columns: unset; /* do not set template columns and rows */\n    grid-template-rows: unset;\n    overflow: scroll;\n}\n

\n

这样你就可以根据需要添加任意数量的子项，在网格系统中，使用模板时总是很难维护动态内容，

\n

当您无法预测将获得多少商品时，请使用 grid-auto-flow

\n

\xe2\x9c\x8c

\n