如何实现两个不同尺寸<pre>元素并排显示且高度符合预期

你用table相关属性模拟布局出现拉伸的核心原因是：display: table-cell 元素默认会和同一行的其他单元格强制等高，这是表格布局的原生规则——同一行所有单元格高度都会对齐到该行最高的单元格，所以左侧内容更短的<pre>会被自动拉伸到和右侧固定高度的<pre>一致，才会出现大量内部空白。
同时你现有CSS存在属性冲突问题：给通用pre选择器写了display: inline、height:10px，后面又给pre加了display: table-cell，属性覆盖逻辑混乱，也会加剧样式异常。

直接用Flex弹性布局实现，比模拟表格的写法更简单、易维护，后续新增行或者同行加新的<pre>元素都很方便，完全满足「左侧pre高度适配自身内容、右侧pre保持固定高度」的需求。

修正后的完整代码 #

CSS部分 #

<style>
/* 两个pre共用的基础样式 */
pre {
    background: #f4f4f4;
    border: 1px solid #ddd;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    padding: 1em 1.5em;
    word-wrap: break-word;
    border-radius: 1em;
    overflow: auto;
    margin: 0;
}

/* 行容器：用flex实现同行排列 */
.code-row {
    display: flex;
    align-items: flex-start; /* 核心属性：子元素从顶部对齐，不强制等高拉伸 */
    gap: 3vw; /* 控制两个代码块的间距 */
    margin-bottom: 1.6em;
}

/* 左侧pre样式：宽度适配视口，高度自动适配内容 */
pre.code-left {
    border-left: 3px solid #00eeff;
    width: 67vw;
}

/* 右侧pre样式：固定宽度、固定高度，内容超出自动显示滚动条 */
pre.code-right {
    border-left: 3px solid #000efa;
    width: 30vw;
    height: 100px;
}
</style>

HTML部分 #

<!-- 后续要新增行，直接复制.code-row容器追加即可 -->
<div class="code-row">
    <pre class="code-left">
this is a small text
    </pre>
    <pre class="code-right">
this text takes a lot of
space 
so it needs to be scrolled
ok, some more text
and even more just to make sure
    </pre>
</div>

<!-- 新增行示例
<div class="code-row">
    <pre class="code-left">第二行左侧自适应高度的内容</pre>
    <pre class="code-right">第二行右侧固定高度的内容</pre>
</div>
-->

关键逻辑说明 #

• align-items: flex-start是解决拉伸问题的核心：Flex布局默认也会拉伸子元素保持等高，设置该值后子元素会保留自身原有高度，从容器顶部开始对齐，左侧短内容的pre不会被强行拉长
• 把通用样式和差异化样式拆分，避免同一元素被多个选择器设置重复、冲突属性的问题
• 用gap控制同行元素间距，比单独给某一个元素加margin更直观，后续调整间距只需要修改容器属性即可
• 新增行只需要复制.code-row容器放入对应pre元素，不需要额外调整布局逻辑

内容的提问来源于stack exchange，提问作者user9102437