开始在这个专题下塞入代码块后，md格式下的代码块会随机把父容器撑爆，起初一劳永逸的解决方案是添加换行：
pre,
code {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
}
但这样毫无疑问降低了代码的可读性，最好的方案还是使代码块的宽度继承父容器宽度，使长代码可以通过滚轮阅读：
pre,
code {
max-width: 100%;
margin: 0;
overflow-x: auto;
}
但这个css样式无论如何都不能生效，依然会撑爆父容器。目前仍不知道原因是否是因为在桌面端自适应屏幕里我的sidebar部分用了absolute布局固定，内容区用padding强行固定到右侧（但隐隐又感觉不是）。父容器的box-sizing/max-width都设置了，起初怀疑是否和部分父容器的inline-block有关，修改成block并添加了max-width仍然未有解决问题。最后解决方案是在直接父容器里添加上同一行overflow：
.article-card {
max-width: 100%;
overflow-x: auto; //添加此行
border: 1px solid #ddd;
margin: 0 auto;
padding: 5px 20px 10px;
box-sizing: border-box;
background: #fff;
}
于是问题解决了，但不知道实现路径是什么，因为在这个父容器内实际上并没有显示滚动，滚动的仍然只有代码块部分，但如果不添加此行，就仍然会被撑爆。由于解决方案超出想象，所以还是记录一下。
在今天的调试中终于忍无可忍把整坨style.css分开成几个css方便维护了。使用一个main.css导入所有其他css，同样要注意顺序避免相互覆盖：
@import '/css/layouts/style.css';
@import '/css/layouts/...';
...
@import '/css/media.css';
在baseof.html里引用main.css单文件：
<link rel="stylesheet" href="/css/main.css">