如何消除Flex布局文本换行时子元素额外空白，保持2px间距？

我使用display:flex布局展示“vs prev period”文本与百分比内容，要求两个子元素的间距始终保持2px。但当左侧文本或右侧百分比内容过长，导致左侧文本换行（此为预期行为）时，左侧子元素会出现空白，使得实际间距不再是2px。希望在保留按词换行的前提下消除该空白，不采用word-break:break-all方案。

现有代码 #

CSS #

.parent{
display:flex;
max-width: 200px;
gap: 2px;
margin-bottom: 20px;
}

.text{
background: yellow
}

.number {
background: lightblue;
}

HTML #

<div class='parent'>
<div class='text child'>vs prev period</div>
<div class='number child'>1.23%</div>
</div>

<div class='parent'>
<div class='text child'>vs prev period vs prev vs prev</div>
<div class='number child'>1.23%</div>
</div>

<div class='parent'>
<div class='text child'>vs prev period</div>
<div class='number child'>3,221,189,823.23%</div>
</div>

只需修改CSS部分，添加关键属性即可解决问题：

.parent{
display:flex;
max-width: 200px;
gap: 2px;
margin-bottom: 20px;
align-items: flex-start; /* 避免左侧元素被拉伸高度，消除多余空白 */
}

.text{
background: yellow;
flex: 1; /* 让左侧占据剩余空间，保证文本可换行 */
min-width: 0; /* 允许左侧元素被压缩，适配右侧超长内容 */
}

.number {
background: lightblue;
white-space: nowrap; /* 确保百分比始终单行显示 */
}

关键说明 #

• align-items: flex-start：取消flex子元素默认的高度拉伸行为，避免左侧文本换行后，元素内出现多余空白区域。
• flex:1：让左侧文本元素占据父容器剩余空间，确保文本在空间不足时自动按词换行。
• min-width:0：突破flex子元素的最小宽度限制（默认等于内容宽度），保证右侧内容超长时，左侧能被正常压缩并换行。
• white-space:nowrap：固定百分比内容为单行，符合展示需求。

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