设置code标签为inline-flex致高度异常，求修复方案

问题根源 #

把code.inline-code设为inline-flex后高度膨胀，主要原因是：

• flex布局默认align-items: stretch，会让容器高度撑满表格单元格的可用空间
• 浏览器默认行高、内边距会额外增加容器高度
• 固定height:16px会强制容器高度，长代码换行后会被截断或溢出，破坏布局

修复方案 #

不用固定高度，通过调整flex属性和布局规则控制高度，同时兼容长代码场景：

/* 核心修复样式 */
.inline-code {
  display: inline-flex;
  align-items: center; /* 替换默认的stretch，让内容垂直居中，避免容器过度拉伸 */
  line-height: 1; /* 重置行高，消除默认行高带来的额外高度 */
  padding: 2px 4px; /* 按需设置内边距，不要过大 */
  box-sizing: border-box; /* 确保内边距不会增加容器总尺寸 */
  max-width: 100%; /* 限制容器最大宽度为表格单元格宽度 */
  overflow-x: auto; /* 长代码时显示横向滚动条，避免破坏布局 */
}

/* 配合表格单元格优化 */
td {
  vertical-align: middle; /* 让单元格内内容垂直居中，进一步协调高度 */
}

说明 #

• 移除固定height后，容器会自适应内容高度，align-items:center保证内容不会撑高容器
• overflow-x: auto让长代码可以横向滚动，不会换行溢出或被截断
• box-sizing: border-box确保内边距不会额外增加容器尺寸，避免布局偏移

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