Flex 1 child takes other siblings off the line

Question

I have a display flex div with 2 child.

first one have a text with this css:

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

this css when first child have a big text make second child take off the line and hide some of his content.

How can I set the width of the first child so that the second child does not go out of line and both widths are filled?

With this image you can see dom, css and the problem

Answer 1

For the second child <div>, set the width of it to min-content and disable any wrap

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