Input fields with dynamic width

Another case where Flexbox can come in handy is for input fields with dynamic width. The requirements for them are as follows:

• Various items can occupy a single line together with a field, including buttons, links, and signatures.
• The size of the additional items is not defined. It depends on their content.
• In this case, the field should be stretched to fit the entire space remaining in the parent container.
• And it should change its width when the container size is changed.

You can only use a flexbox to solve this task. Convert the input field container into a flex container. All of the items inside it will be transformed into flex items, and their basic sizes will be resized depending on their contents (flex-basis: auto;). All that is left is to assign a non-zero growth factor to the input fields.

Everything will work fine in a sufficiently wide container. You will only start to encounter problems in containers that are too narrow: by default, input fields will not be compressed after a predetermined width, which will cause text to overflow the remaining items.

In order to cope with these problems, you need to assign a zero factor to all of the items with the exception of the input fields, and you clearly need to assign a minimum width to the input fields themselves.