我设计了一个页面布局，它具有响应能力，可以根据较小的屏幕进行微调，但当我添加代码块(并使用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容器和article，页面会调整得很好，但如果其中任何一个出现，页面就会中断。此外，如果我让CSS保持原样，并注释掉代码块，它是有响应的。
任何关于这些组件如何交互的类型都将不胜感激，谢谢！
编辑：为了澄清，当响应式设计不起作用时，页面宽度不适应屏幕大小。请参阅下面的屏幕截图：
全屏模式中的内容
没有CSS的手机外观如何-代码框会像它应该的那样滚动，但页面的其余部分会适应
CSS 的手机外观
请注意，2也是网站在使用CSS和不使用代码块的情况下的外观。因此，他们互动的方式正在发生变化。
我认为你的问题在于这个规则：
article {
width: 800px;
}
这就是为什么代码顶部的文本不会根据屏幕进行调整的原因。
代码标记本身必须隐含一些CSS规则，以防止代码换行或"换行"；响应"；对于屏幕，因为indentaion在该元素内部很重要，不应该太受屏幕大小的影响。
也许你会想添加一个溢出-x:auto到元素，以便在屏幕不够宽时滚动查看更多代码。如果你也想在代码中向下滚动，这也适用于overflow。
我只需将overflow: auto;添加到文章部分的CSS中就可以解决这个问题。
https://gist.github.com/grahamjpark/0cb9d2cfbe7a972bc20320781806e284#file-test-css-L15
我在这里找到了答案：
带有<pre>内容不收缩
尽管这看起来很有用，如果这不能解决你的问题：
https://weblog.west-wind.com/posts/2016/feb/15/flexbox-containers-pre-tags-and-managing-overflow