title: Contain fixed element within container
body: <p>Having a flex layout with top, left, middle and right.
  Middle is divided into <em>main</em> and foot.</p>
  
  <p>Within the <em>main</em> I want to have fixed elements, kind of like an MDI, as well as static elements.</p>
  
  <p>If one scroll the fixed element should stay in same position of view. But, it should be contained within the <em>main</em> element if it is moved above or to the left of <em>main</em>. As in: not overlap the top, left, right etc.</p>
  
  <p><strong>THIS:</strong></p>
  
  <p><sup><em>Colors and margins added to make a visual representation of the layout</em></sup></p>
  
  <p><a href="https://i.stack.imgur.com/62Cuj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/62Cuj.png" alt="Desired view"></a></p>
  
  <p><strong>NOT THIS:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/JVjyL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JVjyL.png" alt="Undesired view"></a></p>
  
  <p>Below is a simplified sample with a container within a container.</p>
  
  <p>If one select the <em>fixed</em> positioning for the sub "window" it stay in place on scrolling, but it overlaps the parent if moved outside.</p>
  
  <p>I can use absolute and reposition it on scroll by using JavaScript, but wondered if there was a pure CSS / layout way to get the same result.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function set_style_pos (e) {
    moveable.style.position = e.target.value;
  }
  function halt (e) {
    e.preventDefault();
    e.stopPropagation();
  }
  const drag = {
    el: null,
    ex: 0,
    ey: 0,
    xs: 0,
    ys: 0,
    move: function (e) {
      halt(e);
      drag.el.style.marginLeft = (e.clientX - drag.sx + drag.ex) + 'px';
      drag.el.style.marginTop = (e.clientY - drag.sy + drag.ey) + 'px';
    },
    end: function  (e) {
      halt(e);
      window.removeEventListener('mouseup', drag.end);
      window.removeEventListener('mousemove', drag.move);
    },
    start:  function (e) {
      let cs;
      halt(e);
      window.addEventListener('mouseup', drag.end);
      window.addEventListener('mousemove', drag.move);
      drag.el = e.target;
      cs = getComputedStyle(drag.el);
      drag.ex = parseInt(cs.getPropertyValue('margin-left')) || 0;
      drag.ey = parseInt(cs.getPropertyValue('margin-top')) || 0;
      drag.sx = e.clientX;
      drag.sy = e.clientY;
    },
    check: function (e) {
      let t = e.target;
      if (t.dataset.moveable == "1")
        drag.start(e);
    }
  };
  document.addEventListener('mousedown', drag.check);
  document.addEventListener('change', set_style_pos);
  lines.textContent = "scroll me\n".repeat(100);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      box-sizing: border-box;
  }
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    color: #444;
    font: 14px sans-serif;
  }
  label {
    cursor: pointer;
  }
  .outer {
    display: flex;
    padding: 20px;
    background: goldenrod;
    flex-grow: 1;
    overflow: hidden;
  }
  .inner {
    position: relative;
    overflow: scroll;
    background: gray;
    flex-grow: 1;
  }
  .box {
    position: absolute;
    width: 140px;
    height: 150px;
    background: silver;
    box-shadow: 0 0 3px red;
    cursor: move;
    margin-left: 90px;
    margin-top: -5px;
    padding: 20px;
  }
  .box div {
    font-weight: 700;
    pointer-events: none;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer"&gt;
    &lt;div class="inner"&gt;
      &lt;div class="box" id="moveable" data-moveable="1"&gt;
        &lt;div&gt;Move Me&lt;/div&gt;&lt;br /&gt;
        &lt;label&gt;&lt;input type="radio" name="p" value="absolute" checked /&gt;absolute&lt;/label&gt;&lt;br /&gt;
        &lt;label&gt;&lt;input type="radio" name="p" value="fixed" /&gt;fixed&lt;/label&gt;
      &lt;/div&gt;
      &lt;pre id="lines"&gt;&lt;/pre&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>