Interactive online courses HTML Academy
2026-03-09 10:54 Diff
https://htmlacademy.org/courses/layout/flexbox-2/input-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.