Sticky sidebar with scrollable content on x-axis-CodePudding

When having a sticky sidebar and scrollable content on the x axis, position sticky stops being sticky at a certain point. It seems like it has something to do with overflow and sticky cant deal with that. So how do make the sidebar stick at all times to the side?

I made a example on fiddle: https://jsfiddle.net/qt3eL1o4/2/

.align {
  display: flex;
}

.container {
  display: flex;
}

.item {
  min-width: 500px;
  background-color: red;
}

.ul {
  position: sticky;
  background-color: yellow;
}

<div >
  <ul >
    <li >
      <p>21:00</p>
    </li>
    <li >
      <p>22:00</p>
    </li>
    <li >
      <p>23:00</p>
    </li>
    <li >
      <p>00:00</p>
    </li>
  </ul>
  <div >
    <div >
      <h1>
        HEADER
      </h1>
      <p>
        - Det her er blevet en form for manddomsprøve. Det er jo en flertalsregering, og hvis den begynder at bakke på et af de allerførste forslag, fordi det er upopulært, og fordi regeringen kommer i modvind, så siger det også noget om regeringen, siger Jesper
        Vestergren.
      </p>
    </div>
    <div >
      <h1>
        HEADER
      </h1>
      <p>
        - Det her er blevet en form for manddomsprøve. Det er jo en flertalsregering, og hvis den begynder at bakke på et af de allerførste forslag, fordi det er upopulært, og fordi regeringen kommer i modvind, så siger det også noget om regeringen, siger Jesper
        Vestergren.
      </p>
    </div>
    <div >
      <h1>
        HEADER
      </h1>
      <p>
        - Det her er blevet en form for manddomsprøve. Det er jo en flertalsregering, og hvis den begynder at bakke på et af de allerførste forslag, fordi det er upopulært, og fordi regeringen kommer i modvind, så siger det også noget om regeringen, siger Jesper
        Vestergren.
      </p>
    </div>
    <div >
      <h1>
        HEADER
      </h1>
      <p>
        - Det her er blevet en form for manddomsprøve. Det er jo en flertalsregering, og hvis den begynder at bakke på et af de allerførste forslag, fordi det er upopulært, og fordi regeringen kommer i modvind, så siger det også noget om regeringen, siger Jesper
        Vestergren.
      </p>
    </div>
    <div >
      <h1>
        HEADER
      </h1>
      <p>
        - Det her er blevet en form for manddomsprøve. Det er jo en flertalsregering, og hvis den begynder at bakke på et af de allerførste forslag, fordi det er upopulært, og fordi regeringen kommer i modvind, så siger det også noget om regeringen, siger Jesper
        Vestergren.
      </p>
    </div>
  </div>
</div>

CodePudding user response：

Added left:0 to .ul and overflow-x:scroll to .align

.align {
  display: flex;
  overflow-x:scroll
}

.container {
  display: flex;
}

.item {
  min-width: 500px;
  background-color: red;
}

.ul {
  position: sticky;
  background-color: yellow;
  left:0
}

<div >
  <ul >
    <li >
      <p>21:00</p>
    </li>
    <li >
      <p>22:00</p>
    </li>
    <li >
      <p>23:00</p>
    </li>
    <li >
      <p>00:00</p>
    </li>
  </ul>
  <div >
    <div >
      <h1>
        HEADER
      </h1>
      <p>
        - Det her er blevet en form for manddomsprøve. Det er jo en flertalsregering, og hvis den begynder at bakke på et af de allerførste forslag, fordi det er upopulært, og fordi regeringen kommer i modvind, så siger det også noget om regeringen, siger Jesper
        Vestergren.
      </p>
    </div>
    <div >
      <h1>
        HEADER
      </h1>
      <p>
        - Det her er blevet en form for manddomsprøve. Det er jo en flertalsregering, og hvis den begynder at bakke på et af de allerførste forslag, fordi det er upopulært, og fordi regeringen kommer i modvind, så siger det også noget om regeringen, siger Jesper
        Vestergren.
      </p>
    </div>
    <div >
      <h1>
        HEADER
      </h1>
      <p>
        - Det her er blevet en form for manddomsprøve. Det er jo en flertalsregering, og hvis den begynder at bakke på et af de allerførste forslag, fordi det er upopulært, og fordi regeringen kommer i modvind, så siger det også noget om regeringen, siger Jesper
        Vestergren.
      </p>
    </div>
    <div >
      <h1>
        HEADER
      </h1>
      <p>
        - Det her er blevet en form for manddomsprøve. Det er jo en flertalsregering, og hvis den begynder at bakke på et af de allerførste forslag, fordi det er upopulært, og fordi regeringen kommer i modvind, så siger det også noget om regeringen, siger Jesper
        Vestergren.
      </p>
    </div>
    <div >
      <h1>
        HEADER
      </h1>
      <p>
        - Det her er blevet en form for manddomsprøve. Det er jo en flertalsregering, og hvis den begynder at bakke på et af de allerførste forslag, fordi det er upopulært, og fordi regeringen kommer i modvind, så siger det også noget om regeringen, siger Jesper
        Vestergren.
      </p>
    </div>
  </div>
</div>