title: Stick a Div element during Horizontal scroll
body: <p>I am struggling with a layout problem and I hope to find some help to solve it.</p>
  
  <p>I am designing a page with row/lane based content.
  Each row has multiple div elements with some content.
  So it has to be possible to scroll through the rows vertically as well as horizontally.</p>
  
  <p>Now the problem is, that the first div element inside every row is kind of like the row header, which provides some description about the content of that row.</p>
  
  <p>I want this div element to always stay visible during horizontal scrolling.
  Position: fixed is not a option since it would prevent the "row-header" to scroll with its content during a vertical scroll.</p>
  
  <p><a href="https://i.stack.imgur.com/3uElG.jpg" rel="nofollow">What it should look like during a horizontal scroll</a></p>
  
  <p>Here's the fiddle with my code: <a href="https://jsfiddle.net/rco56cbp/" rel="nofollow">https://jsfiddle.net/rco56cbp/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
      font-family: 'Arial', sans-serif;
      margin: 0;
  }
  * {
      box-sizing: border-box;
  }
  header {
      background: #F7F7F7;
      box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.50);
      /**/
      width: 100%;
      height: 90px;
      /**/
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      z-index: 55;
      top: 0;
  }
  
  /* Left Sidebar */
  .side-bar-bg {
      width: 130px;
      height: 100vh;
      z-index: -1;
      position: fixed;
      background: #F7F7F7;
      border: 1px solid #E0E0E0;
      box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.50);
  }
  
  /* Wrapper around main content */
  .content-container {
      margin-top: 110px;
      height:100%;
      position:absolute;
      width:100%;
  } 
  
  /* Content elements*/
  .lane,
  .lane-head,
  .phase,
  .lane-content {
      display: flex;
  }
  .lane {
      margin-bottom: 1.25em;
      //flex-direction: row;
      align-items: center;
  }
  .lane-head {
      min-width: 130px;
      background-color: #ffffff;
      box-shadow:0px 0px 0px 1px #BFC0C2 inset;
      /* Flex &amp; Layout */
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      align-self: stretch;
      /**/
      margin-right: 1em;
  }
  .lane-label {
      font-weight: 500;
      font-size: 13px;
      color: rgba(82,94,106,0.65);
      line-height: 22px;
      margin-left: 1em;
      margin-right: 1em;
      text-align: center;
  }
  .lane-content {
      z-index: -3;
  }
  /* Grid System */
  .col-1 {  min-width: 200px;     max-width: 200px;  }
  .col-2 {  min-width: 420px;     max-width: 420px;  }
  .col-3 {  min-width: 640px;     max-width: 640px;  }
  .col-1, .col-2, .col-3 {  margin-right: 20px;  }
  
  .textbox {
      padding: 0.7em 1em 1.5em 1em;
      color: #FFFFFF;
      min-width: 200px;
      max-width: 200px;
      background-color: #78BE20;
  }
  .phase {
      background: #005691;
      align-self: stretch;
      align-items: center;
      padding: 0.6em 1em;
  }
  
  /* Typo */
  .phase {
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
  }
  .textbox h3 {
      font-weight: bold;
      font-size: 16px;
      margin: 0 0 0.3em 0;
  }
  .textbox p {
      font-weight: normal;
      font-size: 13px;
      margin: 0 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
      &lt;h1&gt;Header&lt;/h1&gt;
  &lt;/header&gt;
  &lt;div class="side-bar-bg"&gt;&lt;/div&gt;
  &lt;!------  CONTENT  ------&gt;
  &lt;div class="content-container"&gt;
      &lt;div class="lane"&gt;
          &lt;div class="lane-head"&gt;&lt;span class="lane-label"&gt;Small Boxes&lt;/span&gt;&lt;/div&gt;
          &lt;div class="lane-content"&gt;
              &lt;div class="phase col-2"&gt;Lorem Ipsum&lt;/div&gt;
              &lt;div class="phase col-3"&gt;Bacon Ipsum&lt;/div&gt;
              &lt;div class="phase col-2"&gt;Egg Ipsum&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="lane"&gt;
          &lt;div class="lane-head"&gt;&lt;span class="lane-label"&gt;Bigger Boxes&lt;/span&gt;&lt;/div&gt;
          &lt;div class="lane-content"&gt;
              &lt;div class="textbox col-1"&gt;
                  &lt;h3&gt;Aenean commodo&lt;/h3&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="textbox col-1"&gt;
                  &lt;h3&gt;Consequat&lt;/h3&gt;
                  &lt;p&gt;Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="textbox col-1"&gt;
                  &lt;h3&gt;Consequat&lt;/h3&gt;
                  &lt;p&gt;Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="textbox col-1"&gt;
                  &lt;h3&gt;Consequat&lt;/h3&gt;
                  &lt;p&gt;Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="textbox col-1"&gt;
                  &lt;h3&gt;Consequat&lt;/h3&gt;
                  &lt;p&gt;Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="textbox col-1"&gt;
                  &lt;h3&gt;Consequat&lt;/h3&gt;
                  &lt;p&gt;Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="textbox col-1"&gt;
                  &lt;h3&gt;Consequat&lt;/h3&gt;
                  &lt;p&gt;Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The fixed left sidebar shall serve as a background to the "lane-headers".</p>
  
  <p>The reason I want the lane-headers and the lane-content to be inside one div container is that later the whole canvas becomes dynamic and interactive. The content will be generated dynamically and the user will be able to interact with the canvas with drag-drop and so on.</p>
  
  <p>I would appreciate your help very much, thanks in advance!</p>