React bootstrap full width container with max width properties

Question

Is there a way in react-bootstrap to get a child container to overflow out of its parent <Container> which has max-width properties set to each viewport?

Imagine the child container being a horizontal scrollable container with multiple pills selection aligned side by side. So, when I scroll through the pills, the left and right side is cropped out by the max-width property of <Container>, which is expected. I want the child container to start at the same left position as the other containers that are not full width, and at the same time the left and right side isn't being cropped out, thus it is being able to scroll horizontally all the way to the left and right.

Below are the ways that I have tried:

1. Using <Container fluid>, which allows a full width container, but since it is controlled by max-width, I am unable to manually put in padding to the left and right to match the left and right gaps.
2. Using position absolute, this solves half of the issue, the right side is all the way to the edge of the screen (which is correct), but the left side isn't.

JSX:

<Container>
  <div className='parent'>
    <div className='child'>
      <div className='pills'>Test</div>
      <div className='pills'>Test</div>
      <div className='pills'>Test</div>
      <div className='pills'>Test</div>
      <div className='pills'>Test</div>
    </div>
  </div>
</Container>

Styling:

.parent {
  position: relative;
  height: 50px;

  .child {
    position: absolute;
    display: flex;
  }
}