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

Question

我设计了一个响应式页面布局，可以很好地适应较小的屏幕，但是当我添加代码块（并使用 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 和不使用代码块时网站的外观。所以关于他们互动方式的一些事情正在发生变化。

Answer 1

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

    article {
        width: 800px;
    }

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

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

也许您需要向元素添加 overflow-x:auto;，这样当屏幕不够宽时您可以滚动查看更多代码。如果你也想在代码中向下滚动，这也适用于 overflow-y。

Answer 2

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

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

我在这里找到了答案：

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

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

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

Prism code block breaks responsive design (using flexbox)

css

viewport

flexbox

responsive-design

prismjs