Semantic UI网格与Flex布局：垂直滚动条引发水平滚动条的解决咨询

问题根源是：当#content出现垂直滚动条时，滚动条会占用一部分容器宽度，导致内部Semantic UI网格的总宽度超过收缩后的可用宽度，进而触发水平滚动。以下是几种可行的解决方法：

方法1：使用scrollbar-gutter: stable（推荐） #

这个CSS属性能让容器提前预留滚动条的宽度，无论垂直滚动条是否显示，内容区域的可用宽度保持一致，从根本上避免宽度变化导致的水平滚动。修改#content的CSS：

#content{
    flex-grow: 1;
    overflow: auto;
    scrollbar-gutter: stable; /* 新增属性 */
}

scrollbar-gutter: stable会在容器右侧固定预留滚动条的空间，即使没有滚动条时也维持这个宽度，这样当内容过长出现垂直滚动条时，网格的布局宽度不会被挤压，自然不会触发水平滚动。

方法2：强制隐藏水平滚动条 #

如果确认页面内容本身不会超出容器宽度，只是滚动条导致的宽度偏移，可以直接禁用水平滚动：

#content{
    flex-grow: 1;
    overflow-y: auto; /* 仅允许垂直方向滚动 */
    overflow-x: hidden; /* 隐藏水平滚动条 */
}

⚠️ 注意：如果网格或内部元素确实存在超出宽度的内容，这个方法会导致内容被截断，仅适用于布局本身无宽度溢出的场景。

方法3：调整Semantic UI网格的默认边距 #

Semantic UI的.ui.grid默认带有外边距，可能会导致网格超出#content的宽度范围。可以给网格添加自定义样式修正：

#grid.ui.grid {
    margin: 0; /* 移除网格默认的外边距 */
    width: 100%; /* 强制网格占满容器宽度 */
}

如果列的内边距过大，也可能导致总宽度溢出，必要时可以调整.ui.column的padding值，确保列的总宽度（含内边距）不超过容器宽度。

方法4：兼容旧浏览器的滚动条宽度适配 #

如果需要兼容不支持scrollbar-gutter的旧浏览器，可以通过JavaScript计算滚动条宽度，给容器添加右侧内边距来抵消滚动条占用的空间：

// 计算浏览器滚动条的宽度
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
// 给content设置对应宽度的右侧内边距
document.getElementById('content').style.paddingRight = `${scrollbarWidth}px`;

同时配合CSS确保内边距被包含在容器宽度内：

#content{
    flex-grow: 1;
    overflow: auto;
    box-sizing: border-box; /* 让padding包含在容器宽度计算中 */
}

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