Html – Overflow makes item in absolute position disapearing

So I have a specific timeline with several month that can go beyond its container and no scroll is available. The month are inside a div but are visually positionned on top of it with relative/absolute combo.If I decide to do overflow: "auto" to see the last items of the timeline then the month disappears.

here is my code:

const Timeline = () => {

 const monthsBetween = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec', 'jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul'];

  return (
      <div style={{ width: `${monthsBetween.length * 150}px` }}>
        <div style={{ width: `${monthsBetween.length * 150}px`, border: '1px solid lightgrey', height: '50px', position: 'relative', display: 'flex', flexDirection: 'row' }}>
          {monthsBetween.map((month, index) => (
            <div key={index} >
              <p style={{ position: 'absolute', top: '-35px', left: `calc(150px * ${index + 1})`, transform: 'translateX(-50%)' }}>{month}</p>
              <div style={{
                position: 'absolute',
                top: '0',
                left: `calc(150px * ${index + 1})`,
                borderLeft: "1px solid lightgray",
                height: "50px",
              }} />
            </div>
          ))}
        </div>
      </div>
    )
}

I know that the problem is in the position with CSS,I can still see the bottom of the month appearing but I cannot not find a way to fix it, here it looks without overflow:

And here with the overflow:

And it still does not scroll on the right.

EDIT: after adding:

• overflow:"auto", padding: "35px 0"
  on the first div I can now see the month and the scrollbar, but it is still not scrolling.