如何使wrapper div延伸至页面右侧且不换行，避免内容下移？

问题原因 #

当前布局的核心问题在于：

• .active-sockets 使用了 float: left，导致它的宽度被内部内容撑开，而非占满可用页面宽度
• .wrapper 设置的 width: 100% 是相对于 .active-sockets 的收缩宽度，而非页面整体宽度
• 多余的 float 和 inline-flex 组合导致布局冲突，内容被挤到下方

修改后的CSS代码 #

.wrapper {
    display: flex; /* 替换inline-flex，让容器占满父元素宽度 */
    flex-wrap: nowrap;
    margin: 0;
    width: 100%;
}

.socket {
    background-color: rgb(24, 24, 24);
    margin: .2em;
    padding: .8em;
    border-top-left-radius: .5em;
    border-bottom-left-radius: .5em;
    flex: 1; /* 让socket占满wrapper的可用宽度 */
    margin: 0;
    margin-top: 1em;
}

.active-sockets {
    /* 去掉float:left，避免宽度收缩 */
    margin: 1em;
    height: 100vh;
    width: calc(100% - 2em); /* 减去左右各1em的margin，占满页面宽度 */
}

.active {
    background-color: rgb(24, 24, 24);
    color: white;
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: .5em;
    border-top-left-radius: .25em;
    border-bottom-left-radius: .25em;
    width: 100%;
}

关键修改说明 #

1. 调整.active-sockets的宽度与布局：

   • 移除float: left，避免容器宽度被内容限制
   • 使用width: calc(100% - 2em)，抵消左右各1em的margin，让容器占满页面剩余宽度

2. 优化.wrapper的显示模式：

   • 将inline-flex改为flex，确保容器自动占满父元素的可用宽度，无需额外float

3. 让.socket自适应宽度：

   • 使用flex: 1替代width: 100%，确保socket能填满wrapper的宽度，同时保持flex布局的灵活性

这样修改后，wrapper就能覆盖目标中的绿色高亮区域，同时内容不会错位下移。

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