How to Stop 100% Width Text Boxes from Extending Beyond Their Containers

Can I stop 100% Width Text Boxes from extending beyond their containers?

What you could do is to remove the default "extras" on the input:

input.wide {display:block; width:100%;padding:0;border-width:0}

This will keep the input inside its container.
Now if you do want the borders, wrap the input in a div, with the borders set on the div (that way you can remove the display:block from the input too). Something like:

<div style="border:1px solid gray;">
 <input type="text" class="wide" />
</div>

Edit:
Another option is to, instead of removing the style from the input, compensate for it in the wrapped div:

input.wide {width:100%;}

<div style="padding-right:4px;padding-left:1px;margin-right:2px">
  <input type="text" class="wide" />
</div>

This will give you somewhat different results in different browsers, but they will not overlap the container. The values in the div depend on how large the border is on the input and how much space you want between the input and the border.

Stop text input with 100% width and 10px padding extending beyond 100% width

Use box-sizing:

#s {
    width: 100%;
    display:block;
    padding: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Here is a demo.

Note: It's supported by all major browsers since IE8. For Android just don't forget the -webkit prefix. More Details

Keep input type= text / at 100% width from overflowing its container without HTML hacks and also making it still look like a textbox?

Try using:

input{
    box-sizing:border-box;
}

If you want to go nuts, you could even use the below to specifically zero-in on text boxes:

input[type=text]{
    box-sizing:border-box;
}

Have a look at this fiddle

Prevent the text going out of the container if it's over 90% width

If the width of the scrollbar is fixed (300px), and the text's width (the text, not the element) is more or less fixed (about 85px - from 1% to 100%), set the text as an absolutely positioned pseudo element child of the .progress, and set it's width and max-width:

width: calc(100% + 100px);
max-width: 300px;

If you align the text to the right, it will appear after the bar, until max-width is reached.

/** js to demonstrate changing values **/var progressBar = document.querySelector('.progress');function progress() {  var minmax = [0, 100];  var step = 1;    const iterate = (current) => {    progressBar.style.width = `${current}%`;    progressBar.setAttribute('data-percentage', current);        if(current !== minmax[1]) {      setTimeout(() => iterate(current + step), 40);    } else {      minmax = minmax.reverse();      step = -step;            setTimeout(() => iterate(minmax[0]), 500);    }  }    iterate(minmax[0]);}
progress();

section#progressish {  padding: 20px;  width: 300px;}
div#progressbar {  background-color: #d1d1d1;  height: 10px;  margin-bottom: 15px;  width: 100%;}
div#progressbar>.progress[data="bar"] {  position: relative;  background-color: #111111;  height: 10px;  margin-bottom: 15px;  width: 0%;}
.progress::before {  position: absolute;  top: -20px;  width: calc(100% + 85px);  max-width: 300px;  text-align: right;  white-space: nowrap;  content: attr(data-percentage)"% avklarat";}

<section id="progressish">  <div id="progressbar">    <div class="progress" data="bar" data-percentage></div>  </div></section>

#outer {  background: red;  padding: 1em;}#text {  width: 100%;  padding: 1em;  box-sizing: border-box;}

<div id="outer">  <input type="text" id="text"></div>