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.
