title: Fixed top (header) and fixed left (column) while rest of elements scroll inside React Component
body: <p>Edit: In order to make it easier to work with:
  <a href="https://codesandbox.io/s/brave-kalam-15kncz?file=/src/App.js" rel="nofollow noreferrer">Sandbox</a></p>
  <p>I have been stuck for 3 days with this issue so I post here in hope someone can help me find a solution.
  I am making the following <em>table</em> (not a <code>&lt;table&gt;</code>, made with divs) since I didn't find any library to get this kind of calendar, which displays every day on a year,its purpose is to show vacations taken by each employee (that are blurred on the left).</p>
  <p>I'm trying to use the position:fixed and other solutions to keep the employees column fixed as well as the top yellow rows while I scroll over the grid, however, I'm unable to get the intended effect.</p>
  <p>Note that this is a react Component, so for some reason if I use position fixed, it leaves the parent component to be fixed to the main window.</p>
  <p>This is the Component on the parent: (I did it this way as I expect to call <code>&lt;VisorVacaciones&gt;</code> inside other components with different sizes)</p>
  <pre><code>&lt;div style={{width:&quot;inherit&quot;,height:&quot;400px&quot;,maxHeight:&quot;400px&quot;,marginTop:&quot;15px&quot;}}&gt;
              &lt;VisorVacaciones empleados={empleados} years={&quot;2022&quot;} vacas={vacasSelectedEmpleado}/&gt;
            &lt;/div&gt;
  </code></pre>
  <p>This is the render of the component:</p>
  <pre><code>&lt;div className='visorVMainDiv'&gt;
          &lt;div id=&quot;columna_der_calendar_datos&quot; className='calendario_y_celdas'&gt;
              &lt;div id=&quot;elemento_emp&quot; className='visorV_nombres_emp visorV_grow3'&gt;
                  Empleados
              &lt;/div&gt;
              &lt;div id=&quot;cabeceras&quot; className='visorV_cabeceras_vertical'&gt;
                  &lt;div id=&quot;meses&quot; className='visorV_cabeceras_horizontal'&gt;
                      {Array(12).fill(null).map((el,i)=&gt;{
                      var month_css_width= MonthWidth(i+1,years)+&quot;rem&quot;;
                      return (
                      &lt;div style={{outline:&quot;1px solid black&quot;,minWidth:month_css_width,alignItems:'center',justifyContent:'center',display:'flex',boxSizing: &quot;border-box&quot;,backgroundColor: '#f8af07'}}&gt;
                          {moment(&quot;01/01/&quot;+years).add(i,&quot;months&quot;).format(&quot;MMMM&quot;)}
                      &lt;/div&gt;)
                      })}    
                  &lt;/div&gt;
  
                  &lt;div id=&quot;diassemana&quot; className='visorV_cabeceras_horizontal'&gt;
                      {Array(daysOfYear(years)).fill(null).map((el,i)=&gt;{
                          return (
                          &lt;div style={{outline:&quot;1px solid black&quot;,minWidth: universalSize,alignItems:'center',justifyContent:'center',display:'flex', boxSizing: &quot;border-box&quot;,backgroundColor: '#f8af07'}}&gt;
                              {moment(&quot;01/01/&quot;+years).add(i,&quot;days&quot;).format(&quot;dd&quot;)}
                          &lt;/div&gt;)
                      })}    
                  &lt;/div&gt;
  
                  &lt;div id=&quot;dias&quot; className='visorV_cabeceras_horizontal'&gt;
                      {Array(daysOfYear(years)).fill(null).map((el,i)=&gt;{
                          return (
                          &lt;div style={{outline:&quot;1px solid black&quot;,minWidth: universalSize,alignItems:'center',justifyContent:'center',display:'flex', boxSizing: &quot;border-box&quot;,backgroundColor: '#f8af07'}}&gt;
                              {moment(&quot;01/01/&quot;+years).add(i,&quot;days&quot;).format(&quot;D&quot;)}
                          &lt;/div&gt;)
                      })}   
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          
          &lt;div id=&quot;data&quot; className='visorV_cabeceras_vertical'&gt;
              {empleados?.map((emp)=&gt;{
                  return (
                  &lt;div className='visorV_empleado_y_casillas_horizontal'&gt;
                      &lt;div id=&quot;elemento_emp&quot; className='visorV_nombres_emp'&gt;
                          {String(emp.nombre+&quot; &quot;+emp.apellidos).length &lt;= 25 ? 
                          emp.nombre+&quot; &quot;+emp.apellidos
                          : String(emp.nombre+&quot; &quot;+emp.apellidos).substring(0,25)+&quot;...&quot;}
                      &lt;/div&gt;          
  
                      &lt;div className='visorV_empleado_y_casillas_horizontal'&gt; 
                      {Array(daysOfYear(years)).fill(null).map((arr,index)=&gt;{
                          return &lt;C estado={vacas!==null &amp;&amp; index===0 ? &quot;cyan&quot;: &quot;pink&quot;}&lt;/C&gt;
                      })}
                      &lt;/div&gt; 
                  &lt;/div&gt;   
              )})}         
          &lt;/div&gt;
      &lt;/div&gt;)
  </code></pre>
  <p>And CSS rules</p>
  <pre><code>    .visorVMainDiv{
        display:flex; 
        flex-direction: column;
        align-items:flex-start;
        justify-content:flex-start;
        width: 100%;
        height:100%;
        border:2px solid #f8af07;
        font-size: 0.8rem;
        overflow-y: hidden;
        overflow-x: scroll;
      }
      .Columna_empleados{
        display: flex;
        width: 200px;
        height:100%;
        flex-direction: column;
      }
      .calendario_y_celdas{
        display: flex;
        width: 100%;
        height:100%;
        flex-direction: row; 
      }
      .visorV_vertical{
        display: flex;
        flex-direction: column;
      }
      .visorV_cabeceras_horizontal{
        display: flex;
        width: 100%;
        min-height: 1rem;
      }
      .visorV_cabeceras_vertical{
        display: flex;
        width: 100%;
        flex-direction: column;
      }
      .datos_scroll{
        overflow-y: visible;
      }
      
      .visorV_grow3{
        display: flex;
        justify-content: center;
        min-height: 3rem !important;
        align-items: center;
      }
      .visorV_nombres_emp{
        min-width: 200px;
        height: 1rem;
        min-height: 1rem;
        z-index:1;
        outline: 1px solid black;
        position: sticky;
      }
      .visorV_empleado_y_casillas_horizontal{
        display: flex;
    width: 100%;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/ZGWml.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZGWml.png" alt="enter image description here" /></a></p>