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?

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>

This is my code structure, simplified.

However, when you run this, you get this.

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!

Comments

[Jakeer]

Salamalaikum
Jazakallah khair

[MZ]

Waalaikumsalam! Thank you!