CODEWITHSUNDEEP
htmlcssflexbox
Matt
Matt

Reputation: 33

HTML CSS Input exceeds width

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

Upvotes: 0

Views: 1431

Answers (5)

Chioma Audrey
Chioma Audrey

Reputation: 25

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

.inner-container
{
    width: 95%;
}

input
{
    width: 95%;
}
<!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>

Upvotes: 0

Johannes
Johannes

Reputation: 67778

The main issue in this snippet can be solved by applying box-sizing: border-box; to the input in order to include border and padding in the 100% width.

Apart from that, the width: 100% for .inner-container isn't quite correct here: It should be 50%. However, it actually is ignored in this case since the parent element is a flex container, so the children's widths are set automatically by default.

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

.inner-container {
  width: 50%;
}

input {
  width: 100%;
  box-sizing: border-box;
}
<!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>

Upvotes: 0

connexo
connexo

Reputation: 56783

The reason is that you are using the default box model, in which padding and border are added to width (thus width in this model actually means content width).

input elements by default have some user agent (browser) styles applied to them, part of which are padding and border. As you have defined width: 100% these get added to those 100% and this results in an element, that visually requires more space than is available.

To fix it (and further problems of this sort, usually resulting from working with percentages), switch your page to the more easy-to-handle border-box model (in which width actually means visual width) using the following CSS:

:root { box-sizing: border-box; }
*, *::before, *::after, *::marker { box-sizing: inherit; }

Here you can see the user agent styles applied by Chrome:

enter image description here

Upvotes: 2

Telmo Dias
Telmo Dias

Reputation: 4178

I just added box-sizing: border-box; to the input and it worked.

input
{
    width: 100%;
    box-sizing: border-box;
}

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

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>

Upvotes: 0

Related Questions