Html input auto-width work-around
This is a little hello-world-ish, but here goes. There's a weird part of using flexbox where a child element will fill the parent's available space only if the child has content. There's only ever and issue when the child element is an input, because the input element's interior value isn't taken into account when calculating width.
Here's an example of what we want. There are three elements; a directory, a slash, and a file. The first and last will grow to fill space. Renders okay since they're all just divs.
Here's the same example, but with an editable input. Notice that the input just stays that width. It's either fixed width, or, at best, we could expand it to 100% of parent.
You end up with an input that doesn't respect it's min-width, or max-width (55px and 188px respectively) because it defaults to the user agent stylesheet.
Here's how we fix it. We create a second element below the input that mirrors its exact styling, and set the input width to be 100% of container. The mirror element is the one that uses min and max widths, so it'll grow as wide as it needs to up to the limit. We then turn off overflow on the element that holds the two, and link them with a little JS, so they have the same content.
The result is an input that grows as wide as its parent, and the parent grows as wide as the widest child, and that the widest child has the same content as the input. Ta da!
It's unfortunate that we need JS for this, but since you're using an input anyway, odds are you're building something interactive.
-  This one is about autoscaling the width based on the text, which is close to asking the right question. https://stackoverflow.com/questions/8100770/auto-scaling-inputtype-text-to-width-of-value
-  Here's another one, although the solution suggested is rather weird, and has to do with setting width based on character width with the "ch" unit. Strange. https://stackoverflow.com/questions/3392493/adjust-width-of-input-field-to-its-input/3395975
- [N] EDIT: Actually, I found this answer later, which comes the closest to my solution, just using positioning instead of block divs. https://stackoverflow.com/questions/64092841/react-how-to-make-an-input-only-as-wide-as-the-amount-of-text-provided