flex: 1;子元素撑破盒子解决方案背景做一行溢出...展示得时候，flex:1;会撑破盒子，造成溢出...无法正确

背景

做一行溢出...展示得时候，flex:1;会撑破盒子，造成溢出...无法正确展示，解决方式是flex:1元素加上 overflow: hidden;

标准盒子溢出无此问题，代码及展示如下

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 500px;
            border: 1px solid red;
        }

        .ellipsis {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="ellipsis">我是测试得文字我是测试得文字我是测试得文字我是测试得文字我是测试得文字我是测试得文字</div>
    </div>
</body>

微信截图_20240510101854.png

包含一层flex:1元素，无法正确溢出

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 500px;
            border: 1px solid red;
            display: flex;
        }

        .item1 {
            flex: 1;
        }

        .ellipsis {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>

    <div class="wrap">
        <div class="item1">
                <div class="ellipsis">我是测试得文字我是测试得文字我是测试得文字我是测试得文字我是测试得文字我是测试得文字</div>
        </div>
    </div>
</body>

微信截图_20240510102308.png

解决方式是： flex:1，增加 overflow: hidden;

 .item1 {
            flex: 1;
            overflow: hidden;
        }

可正常溢出

微信截图_20240510102429.png

如果父元素需要滚动无法设置 overflow: hidden; 则设置 width:0 或者 min-width:0同样可达到效果