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 >
<div >
<input>
</div>
<div >
<input>
</div>
</div>
</body>
</html>If anyone could please point to my mistake, I'd be extremely happy.
Thank you all in advance, Matt
CodePudding user response：
The reason is that you are using the default 
CodePudding user response：
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 >
<div >
<input>
</div>
<div >
<input>
</div>
</div>
</body>
</html>CodePudding user response：
I just added box-sizing: border-box; to the input and it worked.
input
{
width: 100%;
box-sizing: border-box;
}
CodePudding user response：
If you only want both the input to remain in parent then simply remove inner-container css it should do the work. But if you require something more please elaborate
CodePudding user response：
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 >
<div >
<input>
</div>
<div >
<input>
</div>
</div>
</body>
</html>CodePudding user response：
.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 >
<div >
<input>
</div>
<div >
<input>
</div>
</div>
</body>
</html>