DEV Community

MZ
MZ

Posted on

How to make the HTML input fit the containing div

Hey there!

I wanted to challenge myself to write a technical post again so here I am. I've recently gotten to writing up a todo app in React and came across this issue. It's simple to solve but I thought, why not do up a blog post on it?

Alt Text

This is my code.



<div id='main-div'>
  <div id="inner-div">
      <input id="text-input" type="text" value={this.state.obj.text} placeholder="Enter todo item" onChange={this.handleChange} /> 
  <div>
</div>


Enter fullscreen mode Exit fullscreen mode

This is my code structure, simplified.

However, when you run this, you get this.

Alt Text

I have sort of colour-coded the different divs. Red indicates the main div while blue indicates the inner div.

Notice how the input is overflowing out of the inner div?

So, apparently this is a thing in CSS or HTML. I searched it up and found this answer.

From the answer, I understand that there is a bounding border box on the input tag. If you use the box-sizing: border-box; style with the input tag, this actually places the bounding box inside the tag.

The input tag appears bigger because the bounding box appears outside of it, initially.

It's an interesting property to have.

Well, this has been short but sweet. Hope anyone who comes across this post learned something or have fixed their issue.

Thanks for reading!

Top comments (2)

Collapse
 
jakeerc profile image
Jakeer

Salamalaikum
Jazakallah khair

Collapse
 
muhdmirzamz profile image
MZ

Waalaikumsalam! Thank you!