css - 如何在 CSS 网格中滚动?
问题描述
我有一个嵌入在 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"> </div>
<div class="my-panel"> </div>
</section>
</div>
</main>
<footer></footer>
</div>
解决方案
您在布局方面遇到了两个主要问题:
首先,默认情况下,网格项不能小于其内容。默认值为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
推荐阅读
- click - 如何在反应原生导航 Wix V2 中从侧边菜单导航到页面
- c# - C# Web API 路由 POST 总是返回 404
- javascript - 从前端到后端发送令牌可以吗?
- python - 如何比较两个python环境?
- node.js - Express http api 中的一致错误验证响应,使用 mongoose 和 Joi
- docker - 如何使用 Docker Hub 在特定架构上构建 Docker 映像?
- reactjs - react中如何在类方法和属性之间进行选择?
- vue.js - 数组中的第一个元素不更新
- php - PHP MySQLi 只是在 JSON 中返回一行
- java - 在 Java 8 中,接口默认方法可以访问实例变量吗?