CSS 网格预水平滚动

Question

问题

我想在网格布局中有一个 <pre> 代码块。

这应该是响应式的。当space小的时候，应该可以水平滚动。

我做了什么

body{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-template-areas: "h h h h h h h h h h h h"
                             ". a a a a a a a a a a ."
                             "f f f f f f f f f f f f"
}
main{
        grid-area: a;
      }
pre{
        padding: 1em;
        overflow-x: scroll;
        background: #454649;
        color: white;
}

<body>
  <main>
    <pre><code>Footprint: 88C3 EC7D 458A BB70 B92F 35C1 72C2 CFAE 2E71 F6E2</code></pre>
  </main>
</body>

外观：

我想要的

它应该是响应式的并且应该在 grid-area: a.

的内部

Answer 1

将主要元素的 min-width 设置为 0 应该就足够了，见下文：

body{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        grid-template-areas: "h h h h h h h h h h h h"
                             ". a a a a a a a a a a ."
                             "f f f f f f f f f f f f"
}
main{
        grid-area: a;
        min-width: 0;
}
pre{
        padding: 1em;
        overflow-x: scroll;
        background: #454649;
        color: white;
}

<body>
  <main>
    <pre><code>Footprint: 88C3 EC7D 458A BB70 B92F 35C1 72C2 CFAE 2E71 F6E2</code></pre>
  </main>
</body>

Answer 2

按照功能需求做东西。使用媒体查询定位小型设备并使溢出滚动的最佳方式。这是代码，只需将其放入您的 css 文件即可。

@media (min-width:320px) and (max-width:667px){
pre{
    width: 260px;
    overflow-x: scroll;
    padding: 20px;
    background: #ccc;
  }
 }

CSS 网格预水平滚动

CSS Grid Pre Horizontal Scroll

html

css

pre

css-grid

问题

我做了什么

外观：

我想要的