CSS Width and Overlap

I want to inherit the width of my suggestion div from the input field's width and at the same time overlap it from the objects. My CSS below overlaps but does not inherit the width of the input field. I've tried making it to 100% but it becomes longer than the input field.

.suggestion {
    cursor: pointer;
    background: #FFF;
    box-shadow: 0 2px 2px 0 rgba(34,36,38,.15);
    padding: 5px 20px 5px 20px;
    border-radius: .28571429rem;
    border: 0px solid rgba(34,36,38,.15);
    z-index: 1;
    
    position: absolute; 
    width: inherit;
}
.search-res{
    margin-bottom: 5px;
}
.search-res:hover{
    margin-bottom: 5px;
    color: #2196f3;
}

.warning {
    color: orange
}

<input type="text" formControlName="name" placeholder="Enter Name..." maxlength="32">
<div class="suggestion" *ngIf="suggestions">
  <div *ngFor="let suggestion of suggestions" class="search-res" (click)="onSelectSuggestion(suggestion.name)">
      {{suggestion.name}}
  </div>
</div>

Solution

Here's an example:https://codepen.io/anon/pen/KvgoPX

What I changed was:

For the suggestion div to be absolute, it'll need to be relative to the input in some way. That's what there's an input container around the outside. That can be any width you want.
There's another object in there to show that it overlays.

.inputContainer {
  width:200px;
  position:relative;
  background:green;
}

input {
  width:100%;
}

.suggestion {
  cursor: pointer;
  background: #FFF;
  box-shadow: 0 2px 2px 0 rgba(34,36,38,.15);
  padding: 5px 20px;
  border-radius: .28571429rem;
  border: 0px solid rgba(34,36,38,.15);
  z-index: 1;
  box-sizing:border-box;
  text-align:center;
  position: absolute; 
  width: 100%;
}
.search-res{
  margin-bottom: 5px;
}
.search-res:hover{
  margin-bottom: 5px;
  color: #2196f3;
}

.warning {
  color: orange
}

<div class="inputContainer">
  <input type="text" formControlName="name" placeholder="Enter Name..." maxlength="32">
  <div class="suggestion" *ngIf="suggestions">
    <div *ngFor="let suggestion of suggestions" class="search-res" (click)="onSelectSuggestion(suggestion.name)">
      {{suggestion.name}}
    </div>
  </div>
</div>

<div class="otherStuff"> This is where other objects are </div>