Why doesn't inner div position itself inside outer div

Question

I can't believe after 4 mo's of coding that I can't figure this out. Anyhow, when setting position fixed to an inner div, should it not be placed based on the parent container that has it's position set also? In this case, parent is set to relative so I assumed the child would be inside the parent; instead, the child goes to the corner of the screen: https://codepen.io/algojedi/pen/QWWJKzm

.outer {
  width: 300px;
  height: 100px;
  margin: 5px auto;
  outline: 2px solid red;
  position: relative;
}
.inner {
  width: 200px;
  height: 50px;
  position: fixed;
  bottom: 0; 
  left: 0;
  outline: 2px solid green;
}

<div class="outer">
  <div class="inner">
  </div>
</div>

Answer 1

Position fixed is relative to the viewport, not the parent element. You would be looking for position absolute, to fixed the child element to the bottom of the parent.

Answer 2

position: fixed is relative to viewport. the css for inner should be like

inner {
    width: 200px;
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    outline: 2px solid green;
}