CSS – 'overflow-x: scroll' hides content that overflows in the y-axis

Question

I have some HTML structured roughly as such (I have included the relevant CSS):

<div id = 'wrapper'>
  <div id = 'container' style = 'overflow-x: scroll; display: flex; position: relative'>

    <div id = 'item1>
      <p class = 'tooltip style = 'position: absolute'>Example</p>
    </div>
    <div id = 'item2>
      <p class = 'tooltip style = 'position: absolute'>Example</p>
    </div>
    <div id = 'item3>
      <p class = 'tooltip style = 'position: absolute'>Example</p>
    </div>

  </div>
</div>

I am designing a horizontal bar that contains several items, which – when hovered over – display tooltips. These tooltips are positioned absolutely, whilst the parent div (container) is positioned relatively. The container uses flexbox and has 'overflow-x: scroll' on it in order to allow horizontal scrolling when the width is smaller than the contents. However, this current setup hides the tooltips, which are meant to be visible below the items (they overflow the container div in the y-axis). When 'overflow-x: scroll' is removed, the tooltips are visible. Hence, it seems that the attribute is also hiding the y-overflow. Has anyone experienced this issue before and/or has a solution?

Edit: If 'position: relative' is instead placed on the wrapper, the tooltips become visible, but do not scroll with the items if there is x-overflow.