Why is the second element stretched more than its parent?

Question

css

This example shows that one component has two children: a yellow square, and an inscription to the right of it.
Expected behavior:

What happens:

In the first screenshot, I manually hardcoded the max-width: 250px;. This option is not suitable, because not in all cases I will have a yellow square on the left.
In this case, the Code property should work text-overflow: ellipsis;
: codesandbox
Upd: I apologize for not providing all the details. We want the text to be one line and its container to have width: 100%;

Answer 1

the parent block of the block with the text needs to be registered overflow: hiddenand everything will work

Answer 2

Set the property to the element with X's: The text will be transferred and not climb out in front of the father.