Prism 代码块破坏了响应式设计（使用 flexbox）答案

【问题标题】：Prism code block breaks responsive design (using flexbox)Prism 代码块破坏了响应式设计（使用 flexbox）
【发布时间】：2020-11-09 00:01:24
【问题描述】：

我设计了一个响应式的页面布局，可以很好地适应较小的屏幕，但是当我添加一个代码块（并使用 prism.js 对其进行格式化）时，响应性中断了。代码框和文本内容都超出了设备的宽度，您必须来回滚动。理想情况下，代码块应该有自己的滚动条来查看代码，但内容仍然会适应。我尝试过使用包含内容的 flexbox 的不同属性，但它仍然会破坏布局。

为了缩小范围，我将页面精简为：

<!DOCTYPE html>
<head>
    <link rel='stylesheet' href='page.css' />
    <link href="./external/prism.css" rel="stylesheet" />
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
</head>

<body>
    <script src="./external/prism.js"></script>
    <div class="article-container">
        <article>
            <h1 class="title">Test</h1>
            <p>Dolorem neque quiquia dolor. Est dolor dolor dolorem adipisci consectetur. Adipisci ipsum velit dolore
                consectetur quisquam eius. Non velit est ipsum adipisci adipisci quaerat.</p>
            <pre><code class="language-python">def some_code(file_name):
    with open("some_path/" + file_name + ".md", "r", encoding="utf-8") as input_file:
        return input_file.read()
</code></pre>
        </article>
    </div>

</body>

</html>

page.css 包含：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.article-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

article {
    width: 800px;
}

如果我将 .article-container 和 article 都注释掉，页面调整得很好，但如果其中任何一个存在，它就会中断。另外，如果我保留 CSS 原样并注释掉代码块，它是响应式的。

任何关于这些组件如何交互的类型都将不胜感激，谢谢！

编辑：澄清一下，当响应式设计不起作用时，页面宽度不适应屏幕尺寸。请看下面的截图：

The content in fullscreen mode

How mobile looks without CSS - 代码框按原样滚动，但页面的其余部分会适应

How mobile looks with CSS

请注意，2 也是使用 CSS 和没有代码块时网站的外观。所以他们互动的方式有些问题。

【问题讨论】：

“响应中断”是什么意思？您能否添加问题的屏幕截图以便更好地理解？
感谢@francovici 指出这一点。我附上了截图来澄清

标签： css flexbox responsive-design viewport prismjs

【解决方案1】：

我认为你的问题在于这条规则：

    article {
        width: 800px;
    }

这就是为什么代码顶部的文本不会自动适应屏幕的原因。

code 标签本身必须隐含一些 CSS 规则，以防止代码环绕或“响应”屏幕，因为缩进在该元素内很重要，并且应该不会太受屏幕尺寸的影响。

也许您会想在元素中添加一个 overflow-x:auto; 以便在屏幕不够宽时滚动查看更多代码。如果您也想在代码中向下滚动，这也适用于溢出。

【讨论】：

我也在想类似的事情。我尝试将文章 css 注释掉，但如果您将其注释掉并留下 .article-container，它仍然会损坏。并且 prism 库为代码标签添加了 css（包括允许您滚动代码。如果您在 css 中注释掉文章和 .article-container，您可以看到。
我还尝试了使用 highlight.js 库而不是 prism 的代码。它从他们的 CDN 中提取，因此您应该可以仅使用以下两个文件来玩它（如果您好奇的话）：gist.github.com/grahamjpark/0cb9d2cfbe7a972bc20320781806e284

【解决方案2】：

我只需在文章部分的 CSS 中添加 overflow: auto; 即可解决此问题。

https://gist.github.com/grahamjpark/0cb9d2cfbe7a972bc20320781806e284#file-test-css-L15

我在这里找到了答案：

Flex item with <pre> content not shrinking

虽然这看起来很有用，但如果这不能解决您的问题：

https://weblog.west-wind.com/posts/2016/feb/15/flexbox-containers-pre-tags-and-managing-overflow

【讨论】：