How to make inner element fit within parent

Question

I cannot seem to find a way to make the inner element fit/resize with its parent. Current code looks like:

The page element ends up looking like this and is fixed in width as I resize.

Answer 1

You can use position: absolute for child and position: relative ( don't forget it ) for its parent.

There is more than one solution but i'm using this technique above

For example:

.parent {
  position: relative;
  background-color: #d3d3d3;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

.child {
  position: absolute;
  top: 5%;
  left: 5%;
  background-color: red;
  border: 5px solid green;
  box-sizing: border-box;
  width: 90%;
  height: 90%;
}

<div class="parent">
  <div class="child">
  </div>
</div>