Fatal编程技术网
  • css/
  • 如何在CSS网格中获得滚动？

如何在CSS网格中获得滚动？

css scroll

如何在CSS网格中获得滚动？,css,scroll,css-grid,Css,Scroll,Css Grid,我在css网格中嵌入了一个组件 在堆栈闪电战中，我有一个3行的外部网格。其中一行具有最小宽度。如果视口小于最小宽度，如何使其水平滚动 在中间一行中，我有一个组件，它本身使用2列网格。列中的div具有最小高度 我要寻找的是，如果视口的大小使整个内部组件（红色框）不可见，则红色框是可滚动的 下面是一个堆栈闪电战： 下面是另一个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="

我在css网格中嵌入了一个组件

在堆栈闪电战中，我有一个3行的外部网格。其中一行具有最小宽度。如果视口小于最小宽度，如何使其水平滚动

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

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

下面是一个堆栈闪电战：

下面是另一个例子：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>Showcase</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="./shared/favicon.ico" />
    <style>
    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;
}

    </style>
  </head>

  <body>


  <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>


  </body>

</html>


玻璃陈列柜
html{
框大小：边框框；
}
*，*：之前，*：之后{
框大小：继承；
}
.内容{
显示：网格；
网格模板行：2em 1fr 1px；
网格间距：0.5雷姆；
高度：20em；
}
.我的小组{
边框：1绿色实心；
背景色：红色；
填充：0.25rem；
}
.我的部件{
显示：网格；
网格模板柱：1fr 1fr；
网格间距：0.5雷姆；
填充：0.25rem；
身高：100%；
}
标题{
边框：绿色实心1px；
填充：4px；
}
主要{
边框：蓝色实心1px；
填充：1rem；
}
主要部门{
边框：红色实心1px；
身高：100%；
}
页脚{
边框底部：黑色实心1px；
}
组件展示
您在布局方面遇到了两个主要问题：

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

将
minwidth:0
添加到
main

更完整的解释如下：

第二个，两列的红色框都设置为：

grid-template-columns: 1fr 1fr
这意味着每个列将在容器中共享相等的可用空间分布。如果这些列中没有任何内容，这两个列可以简单地收缩到0宽度，而不会触发溢出。因此，没有滚动条

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

grid-template-columns: 50% 50%
因此，除非这些列中总是有内容强制使用最小宽度，否则我建议如下：

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

}

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

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

✌

.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;