如何在 CSS 网格中滚动?

Question

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

在堆栈闪电战中，我有一个 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 {
display: grid;
align-items: center;
grid-auto-flow: row;
grid-auto-rows: 25%; /* play with this to change height of the children, 50% will fill half */
grid-template-columns: unset; /* do not set template columns and rows */
grid-template-rows: unset;
overflow: scroll;
}

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

当您无法预测将获得多少项目时，请使用网格自动流

✌

Answer 3

将最大高度：100% 添加到父级

<div style="background-color:yellow;max-height:100%;overflow:auto">
<div style="height:2000px;">
</div>
</div>

Answer 4

你可以用这段代码

.container {
display: grid;
grid-gap: 1rem;
grid-auto-flow: column;
grid-auto-columns: 300px;
overflow-x: scroll;
}
<section class="card-container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 1</div>
<div class="card">Card 2</div>
</section>