Flex 1 孩子让其他兄弟姐妹下线

Question

我有一个带有 2 个孩子的显示 flex div。

第一个有这个 css 的文本：

white-space: nowrap;
overflow: hidden;
display: block;
text-overflow: ellipsis;
flex: 1

当第一个孩子有一个大文本时这个 css 让第二个孩子脱线并隐藏他的一些内容。

如何设置第一个孩子的宽度，使第二个孩子不会越界，两个宽度都被填满？

通过这张图片你可以看到 dom、css 和问题

Answer 1

对于第二个孩子<div>，将其宽度设置为min-content 并禁用任何换行

width: min-content;
white-space: nowrap;