Why Does the Outer ≪Div≫ Here Not Completely Surround the Inner ≪Div≫

#outer {  position: fixed;  width: 30%;  height: 30%;  background-color: black;}#inner {
  width: calc(100% - 10px);  height: calc(100% - 10px);  margin: 5px;  background-color: orange;}

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

Why does this inner div show up below the outer div?

Your problem is not with the absolute position. Indeed inner div will have top,left of outer div as root coordinates, the problem is laying down in how divs (block elements) are rendered when no width/height attributes are set, check this below it will answer your question. :)

<div id="outer" style="position: relative; background-color: #f1af1f; width: 100px;">
    Outer
    <div id="inner" style="position: absolute; top: 0; right: 0;">
        Inner
    </div>
</div>

Edit:
I updated the code above, you can run it in your browser and you'll see the follow (I will try to explain how the browser understands it).
A yellow rectangle with text "Outer" on left and "Inner" on right on the same line. The rectangle is 100px width. Now how the browser understands the code above.

First the browser parses the html into DOM Tree, so you can this structure (simplified)
body ->
  div#outer -> // position relative, yellow background, 100px in width, auto-height
    div#inner -> // position absolute, top offset 0 units, right offset 0 units.

Now the browser renders div#outer at top left corner of the browser's window, with the width of 100px, auto calculates the height based on the font used to display the string "Outer". Then it moves to its children (div#inner). It sees its positioned absolute with top and right. Now the browser knows div#outer is positioned relatively so it sets (top,left) coordinates of div#inner to start from (top,left) coordinates of div#outer. Once this is measured, the browser knows how to set top and right. In our case the bounds of div#outer are (top, left, right, bottom): 0, 0, 100, X (depending on div#outer content height). So div#inner position start from div#outer top border to the bottom and from its right border to the left one (depending on the content).

Now, one this to mention here. If you have more content in your div#inner then the height/width of your div#outer the inner one will overlap and go out the boundaries of div#outer. You can fix this by adding: overflow: hidden; to div#outer.

Hope this makes the thing more clear.

Note: I skipped details on how position absolute is handled by the browser.

Inner div not taking the whole scroll width of outer div

Yes, simply set the .innerDiv to display: inline-block;. This way, the .innerDiv behaves like an inline element, which is always as wide as its content, if you don't specify a width.

Here is the working example:

.outerDiv {   max-width:500px;   border:2px solid purple;   overflow:auto;   height: 100px;}.innerDiv {   display: inline-block; /* ← this does the trick */   border:1px dashed red;   background-color: lightgreen;   white-space:nowrap;   /* width: 100%; ← this has to be removed */}

<div class="outerDiv">    <div class="innerDiv">      This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div This is inner div      </div></div>

.outer {
  background: yellow;
  position: relative;
  padding: 10px;
}

.inner {
  position: relative;
}

.inner:before {
  content: '';
  border: 1px solid red;
  position: absolute;
  bottom: -10px;
  left: -10px;
  right: -10px;
  top: -10px;
}

.inner:focus {
  outline: 0;
  position: static;
}

.inner:focus:before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,0,0,.1);
}

<div class="outer">
  <p>Dolor sit amet...</p>
  <p>Dolor sit amet...</p>
  <div class="inner" tabindex="-1">
    lorem ipsum...
  </div>
</div>

.tip-box { overflow: auto; }

.plugin {
          position: absolute;
          z-index: 800;
          border-bottom-right-radius: 5px;
          -webkit-box-shadow: 5px 5px 12px 1px rgba(0, 0, 0, 0.6);
          box-shadow: 5px 5px 12px 1px rgba(0, 0, 0, 0.6); width:auto; 
          display:table-cell;          
}
  .plugin_canvas {
        position: relative;
        background-color: black;
        border: 1px solid #300;
        border-bottom-right-radius: 5px;
        z-index: 800;  
        display:table-cell;         
    }

display: inline-block

  body {      font-size: 0;    }    #outer {      border: 1px solid black;        display: inline-block;    }    .inner {      font-size: 12px;      display: inline-block;      border: 1px solid red;    }

<div id='outer'>
  <div class='inner'>    text1  </div>  <div class='inner'>    text2  </div>
</div>

#inner {
    position:relative;
    top: 80%;
    width: 100%;
    height: 100%;
}

#outer {
    width:200px;
    height: 100px;
}