html - 如何在父div中包含文本框

Question

在following HTML/CSS example ，文本框超出了 div 的边界。尽管输入是 display:block 并且宽度为 100%，但我希望文本框保留在 div 中。

为什么不留在父容器中？我怎样才能修复它，使其响应并保持在父边框中？

<div class="first">
  <input type="text" value="not working" />
</div>

<br/>
<br/>
<div class="sec">
  <input type="text" value="not working" />
</div>

<br/>
<div class="second">
  <span class="second-wrap">
    expected layout with text box
  </div>
</div>

div.first{
  width:50%;
  border:3px solid black;
}

div.first input{
  display:block;
  padding:20px;
  border:3px solid blue;
}

.sec{
  width:50%;
  border:3px solid black;
}

.sec input{
  display:block;
  width:100%;
  padding:20px;
  border:3px solid blue;
}

div.second{
  border:3px solid red;
  width:50%;
}
.second-wrap{
  border:3px solid blue;
  display:block;
  padding:20px;
}

Answer 1

如果您不设置box-sizing: border-box，您将添加边框和填充到全宽。

在输入 CSS 上使用这些更改

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  max-width: 100%;

参见 this codepen