如何避免Flex子项过度扩展，始终保持搜索结果数紧邻前置短语？

问题场景 #

当flex容器拉伸或收缩时，需要让作为第2个flex item的括号内搜索结果数始终紧邻第1个flex item的前置短语，但当前设置下结果数被挤到右侧。

原代码示例 #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>flex item being pushed to the right</title>
        <style>
            body {
                margin: 0;
            }
            body > div {
                border: 1px solid silver;
                display: flex;
                margin: 0.5em;
            }
            div > div:first-child {
                flex-grow: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 0;
            }
        </style>
    </head>
    <body>
        <div>
            <div>Search results for "some reasonably long long long long long long long long long long long sentence"</div>
            <div>(6)</div>
        </div>
    </body>
</html>

问题原因 #

第一个flex item设置了flex-grow: 1，会强制占满容器的剩余空间，导致第二个项目被挤到容器最右侧。

尝试过的方案及新问题 #

移除flex-grow、white-space、width属性，为flex item设置line-height等于flex container的高度，仅显示第一行：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>2 flex item being pushed to the right</title>
        <style>
            body {
                margin: 0;
            }
            div > div {
                line-height: 32px; /* new */
            }
            body > div {
                border: 1px solid silver;
                display: flex;
                height: 32px; /* new */
                margin: 0.5em;
            }
            div > div:first-child {
                /*flex-grow: 1;*/
                overflow: hidden;
                text-overflow: ellipsis;
                /*white-space: nowrap;*/
                /*width: 0;*/
            }
        </style>
    </head>
    <body>
        <div>
            <div>Search results for "some reasonably long long long long long long long long long long long sentence"</div>
            <div>(6)</div>
        </div>
    </body>
</html>

该方案带来新问题：容器收缩时，短语与结果数间出现空白，且text-overflow的省略号不生效。

可行解决方案 #

通过调整flex项目的收缩规则，实现第二个项目始终紧邻第一个项目，同时保证文本过长时正确截断显示省略号：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex item stays adjacent</title>
    <style>
        body {
            margin: 0;
        }
        body > div {
            border: 1px solid silver;
            display: flex;
            margin: 0.5em;
            align-items: center; /* 垂直居中项目 */
        }
        div > div:first-child {
            flex-shrink: 1; /* 允许容器变窄时收缩 */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0; /* 关键：允许项目收缩至小于内容宽度，触发截断 */
            margin-right: 0.5em; /* 可选：与第二个项目保持少量间距 */
        }
        div > div:last-child {
            flex-shrink: 0; /* 禁止收缩，保持自身宽度 */
        }
    </style>
</head>
<body>
    <div>
        <div>Search results for "some reasonably long long long long long long long long long long long sentence"</div>
        <div>(6)</div>
    </div>
</body>
</html>

方案说明 #

• 第一个flex item：设置flex-shrink: 1允许容器变窄时自动收缩，配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis实现文本截断省略；min-width: 0是核心设置，打破flex item默认的最小宽度限制，确保内容过长时能正常收缩截断。
• 第二个flex item：设置flex-shrink: 0，禁止它被压缩，始终保持自身宽度，紧跟在第一个项目的末尾。
• 容器添加align-items: center，让两个项目垂直居中，提升视觉体验。

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