How to stop 100% width text boxes from extending beyond their containers with CSS?

Spread the love

Sometimes, we want to stop 100% width text boxes from extending beyond their containers with CSS.

In this article, we’ll look at how to stop 100% width text boxes from extending beyond their containers with CSS.

How to stop 100% width text boxes from extending beyond their containers with CSS?

To stop 100% width text boxes from extending beyond their containers with CSS, we set the box-sizing property.

For instance, we write

input.wide {
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

to use box-sizing: border-box; to stop 100% width text boxes from extending beyond their containers.

Conclusion

To stop 100% width text boxes from extending beyond their containers with CSS, we set the box-sizing property.

Leave a Reply

Your email address will not be published.