Sometimes, we want to style the input element to fill the remaining width of its container with CSS.
In this article, we’ll look at how to style the input element to fill the remaining width of its container with CSS.
How to style the input element to fill the remaining width of its container with CSS?
To style the input element to fill the remaining width of its container with CSS, we use flexbox.
For instance, we write
<div style="display: flex; flex-direction: row">
<label for="MyInput">label text</label>
<input type="text" id="MyInput" style="flex: 1" />
</div>
to make the div a flex container with display: flex.
Then we set its flex direction to horizontal with flex-direction: row.
Then the elements inside will be placed side by side.
The input has style flex: 1 so it’ll fill the remaining space not filled by the label.
Conclusion
To style the input element to fill the remaining width of its container with CSS, we use flexbox.
