HTML CSS Input exceeds width

February 18, 2022

I cannot seem to find a solution to my issue, which is why I’m here.

I cannot, for the life of me, make the input remain within its parent div.
This following code is an isolated small-scale replication of the issue, just to make sure there’s nothing else affecting it.

If you use the following code, you’ll see that the inputs side by side, somehow are wider than their owner.

.main-container
{
    width: 30%;
    background-color: grey;
    height: 50px;
    display: flex;
}

.inner-container
{
    width: 100%;
}

input
{
    width: 100%;
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<div class="main-container">
    <div class="inner-container">
        <input>
    </div>
    <div class="inner-container">
        <input>
    </div>
</div>

</body>
</html>

If anyone could please point to my mistake, I’d be extremely happy.

Thank you all in advance,
Matt

>Solution :

Add box-sizing: border-box;

   *{box-sizing: border-box;}
.main-container
{
    width: 30%;
    background-color: grey;
    height: 50px;
    display: flex;
}

.inner-container
{
    width: 100%;
}

input
{
    width: 100%;
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<div class="main-container">
    <div class="inner-container">
        <input>
    </div>
    <div class="inner-container">
        <input>
    </div>
</div>

</body>
</html>