How to style the input element to fill the remaining width of its container with CSS?

Spread the love

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&nbsp;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.

Leave a Reply

Your email address will not be published.