Flex 1 child takes other siblings off the line

user_4728447 0
Viewed 36

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.

enter image description here

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

enter image description here

flexbox css html
1 Answers

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

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