Html 如何让flex项目根据内容增长，直到两者都溢出

我有一个flex容器，其中包含两个不同大小的文本项。我需要进行的设计有几个限制：

• 如果这两个项目都可以放入容器而不必截断，那么它们都会占用内容所需的空间
• 如果其中一个占用超过50%的空间，而另一个不占用，则较大的一个可以占用50%以上的剩余可用空间（因此，它应该根据需要灵活增长，而另一个使用内容的宽度）
• 如果两者的宽度都超过50%，则它们的宽度应相等

flex的问题在于，在最后一种情况下，似乎每个项目都以不同的比例增长（尽管每个项目都有flex增长1）。如果一个项目的文本比另一个项目长，则会占用更多的空间，尽管它们都需要超过50%的空间

我试图在此处重现此问题：

.container{
显示器：flex；
柔性包装：nowrap；
宽度：600px；
保证金：0px自动；
溢出：隐藏；
背景色：#bdbd；
}
.标签{
字号：1.2rem；
文本对齐：居中；
填充：20px；
框大小：边框框；
}
.孩子{
位置：相对位置；
宽度：自动；
保证金：0.4em；
边界半径：1米；
背景颜色：浅蓝色；
填充：10px；
框大小：边框框；
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
柔性生长：1；
弹性收缩：1；
弹性基础：自动；
最小宽度：自动；
宽度：自动；
最大宽度：100%；
}
/*硬编码*/
.问题{
边框：2倍纯红；
}
.相等{
宽度：50%；
边框：2倍纯绿；
}
没有心理医生{
弹性收缩：0；
边框：2倍纯绿；
}

9长长长长长长
长长长长长长长长长
12长长长长长长长
12长长长长长长长
12长长长长长长长
7长长长长长
2长
12长长长长长长长
应该是这样的：
9长长长长长长
长长长长长长长长长
12长长长长长长长
12长长长长长长长
12长长长长长长长
7长长长长长
2长
12长长长长长长长

为了使其正常工作，每个子元素都需要基于两个子元素的总宽度应用一个“最大宽度”样式。这可以通过javascript实现，如所附示例

在本例中，如果两个子元素都大于容器的50%，则对这两个元素应用“.max-width-50”类。如果只有一个元素大于50%，则“.max-width-100”类仅应用于行中的该元素

为了正确计算每个元素的宽度，必须在javascript计算完成后应用overflow:hidden。因此，在计算完成后，.overflow类将应用于所有需要它的元素

let containers=document.querySelectorAll（'.container'）；
containers.forEach（container=>{
让children=container.queryselectoral（'.child'）；
设计数器=0；
设宽度计数器=0；
containerWidth=container.offsetWidth；
if（儿童长度）{
children.forEach（child=>{
让childWidth=child.offsetWidth；
let overMax=子宽度/容器宽度；
如果（超过最大值>0.50）{
child.classList.add（'max-width-100'）；
计数器++；
}
宽度计数器+=子宽度；
});
//如果两个元素都大于50%
如果（计数器==2）{
children.forEach（child=>{
child.classList.add（'max-width-50'）；
child.classList.remove（'max-width-100'）；
})
}
//如果元素总宽度大于100%
如果（宽度计数器>1.00）{
children.forEach（child=>{
child.classList.add（'overflow-hidden'）；
});
}
}
});
.container{
显示器：flex；
柔性包装：nowrap；
宽度：600px；
保证金：0px自动；
溢出：隐藏；
背景色：#bdbd；
}
.标签{
字号：1.2rem；
文本对齐：居中；
填充：20px；
框大小：边框框；
}
.孩子{
位置：相对位置；
宽度：自动；
保证金：0.4em；
边界半径：1米；
背景颜色：浅蓝色；
填充：10px；
框大小：边框框；
文本溢出：省略号；
空白：nowrap；
柔性生长：1；
弹性收缩：1；
弹性基础：自动；
最大宽度：100%；
}
.max-width-50{
弹性基准：50%；
最大宽度：50%；
}
.max-width-100{
最大宽度：100%；
}
.溢出隐藏{
溢出：隐藏；
}
/*硬编码*/
.问题{
边框：2倍纯红；
}
.相等{
宽度：50%；
边框：2倍纯绿；
}
没有心理医生{
弹性收缩：0；
边框：2倍纯绿；
}

9长长长长长长
长长长长长长长长长
12长长长长长长长
12长长长长长长长
12长长长长长长长
7长长长长长
2长
12长长长长长长长
应该是这样的：
9长长长长长长
长长长长长长长长长
12长长长长长长长
12长长长长长长长
12长长长长长长长
7隆隆路