How to make the whole input text box full of the whole div

Question

The diagram below, the green is div and white area is a text box, I want to keep text box full of whole div

Who can help me? I will be very grateful.

Answer 1

Set child width and height to 100%

Here is a live demo:

div{
  height:50px;
  width:300px;
  background-color:green;}

div input{width: 100%;height: 100%;}

<div><input type="text" name="test"></div>