【问题标题】：CSS Grid Pre Horizontal Scroll [duplicate]CSS Grid Pre Horizontal Scroll [重复]
【发布时间】：2019-05-05 02:14:55
【问题描述】：

问题

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

这应该是响应式的。当空间很小时，它应该可以水平滚动。

我做了什么

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

【问题讨论】：

标签： html css css-grid pre

【解决方案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>

【讨论】：

【解决方案2】：

根据功能需求做事。使用媒体查询针对小型设备并使溢出滚动的最佳方式。这是代码，只需将其放入您的 css 文件中即可。

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

【讨论】：