我想将Tufte CSS stylesheet修改为两列的页面布局，其中左列包含静态的 article （<article>标记内的内容）在标准Tufte布局中进行样式设置，并且右列包含一个div，其内容完全不同（例如，卡片列表）。从视觉上讲，我想从this example中获取文章，将其宽度缩小大约30％-40％（重要的是，对文章的效果与您通过拖动鼠标来调整浏览器大小一样。右边缘插入相同数量的内容），并在右侧的新创建空间中粘贴不同的内容列。如果屏幕宽度太小（基本上是边注和脚注合并到主体中），那么我将使提要消失并通过图标进行访问。
对于每个these posts，我目前正在使用flexbox来定义两列布局，但是这种方法在tufte.css样式表中不能很好地发挥作用。无论我将右列的宽度设为多大，都无法使左列的padding-left相应缩小。而且，将父容器设置为flexbox似乎会禁用一些重要的功能，这些功能会在屏幕缩小时呈现和包装文本。
我将这个fiddle与tufte.css文件放在一起，顶部进行了基本修改，上面的Tufte CSS示例中的html进行了修改，但是有一个父div和两个孩子，一个用于文章，另一个用于“提要”。任何想法将不胜感激。