如何设置Flexbox垂直自适应增长，避免长文本导致按钮换行？

.main-container {
    display: flex;
    /* 原flex-wrap: wrap改为nowrap，禁止顶层容器整体换行 */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    background: #F7F8FC;
    /* 可按需加内边距，避免内容贴边 */
    padding: 8px 12px;
}

/* 左右按钮区域固定宽度，禁止压缩 */
.flex-row-item.left,
.flex-row-item.right {
    flex-shrink: 0;
}

/* 中间区域占用剩余横向空间 */
.flex-row-item.center {
    flex: 1;
    /* 可按需加左右边距，和按钮区隔开 */
    margin: 0 16px;
}

.sub-container {
    display: flex;
    align-items: center;
    /* 原flex-wrap: wrap改为nowrap，禁止子容器内部按钮换行 */
    flex-wrap: nowrap;
    /* 删除原有的white-space: nowrap属性 */
}

/* 文本区域控制自动换行 */
.sub-text {
    flex: 1;
    white-space: normal;
    overflow-wrap: break-word;
    /* 可按需加左右边距，和前后按钮隔开 */
    margin: 0 12px;
}

你的HTML代码无需修改，直接使用原有结构即可。 #

核心修改逻辑 #

• 顶层main-container关闭换行规则，同时通过flex伸缩属性固定左右按钮区域宽度，让中间区域自动占满剩余横向空间，避免整体布局换行。
• 子容器sub-container关闭换行规则，保证Previous、Next按钮始终和文本区域在同一横向层级。
• 文本区域sub-text开启自动换行规则，内容超长时仅在该区域内部折行，自动撑开容器垂直高度，同时带动外层main-container高度同步拉伸。

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