Text nowrap not working

Hello everyone

I’m trying to make a single line text field where the text doesn’t wrap and that doesn’t outgrow its parent. I can’t find a way to make it.

8652726--1164582--nowrap.gif

As you can see on the GIF above, the long text is being wrapped when the field is too short. Also, the field get wider than the window.

I tried toying with the USS parameters like white-space and overflow but it didn’t change anything.
8652726--1164585--uss.png

Nothing works. Does anyone know how to fix this?
Thanks.

I solved part of the problem by adding flex-shrink: 1. Now the text field no longer outgrow its parent. But the text wrap is still behaving erratically.