Flex布局下双Div优先级显示与省略号截断问题

核心问题在于flex子元素默认的min-width: auto会导致内容撑破容器，无法触发截断，同时flex属性设置不符合优先级需求。调整后的代码如下：

修正后的完整代码 #

<div style="
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 5px 10px;
    border-top: 1px solid #ccc;
    margin-top: 15px;
    text-align: left;
    font-size: 0.9em;
    box-sizing: border-box; /* 避免padding撑大容器宽度 */
">
    <!-- 高优先级子div：优先占用可用空间，超出截断 -->
    <div style="
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis;
        flex: 1 1 auto;
        min-width: 0;
    ">
        111111111111, 
    </div>
    
    <!-- 低优先级子div：使用剩余空间，超出截断 -->
    <div style="
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 0 1 auto;
        min-width: 0;
        margin-left: 8px; /* 可选：增加两个元素间距 */
    ">
        222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
    </div>
</div>

关键调整说明 #

• min-width: 0：给两个子div都添加这个属性，取消flex子元素默认的min-width: auto限制，确保内容超出时能触发截断。
• flex属性设置：
  • 高优先级div：flex: 1 1 auto，表示会优先分配剩余空间（flex-grow:1），空间不足时允许缩小（flex-shrink:1），初始宽度为内容宽度（flex-basis:auto）。
  • 低优先级div：flex: 0 1 auto，表示不抢占剩余空间（flex-grow:0），空间不足时允许缩小（flex-shrink:1），初始宽度为内容宽度。
• box-sizing: border-box：给容器添加这个属性，避免padding和border撑大容器宽度，确保容器宽度严格为100%。

覆盖三种场景验证 #

1. 场景1：两者内容少：高优先级div占自身内容宽度，低优先级div占自身内容宽度，均完整显示。
2. 场景2：低优先级内容多：高优先级div优先占用可用空间，低优先级div仅使用剩余空间，超出部分显示省略号。
3. 场景3：高优先级内容多：高优先级div占满容器剩余空间，超出部分显示省略号，低优先级div仅占自身最小必要宽度（内容截断）。

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